数据表单列搜索输入键问题

Question

当按 Enter 键时，我在使用单列搜索实现数据表时遇到问题。首先，我使用数据表指南实现它，如下所示：table.columns().every( function () {        var that = this;        $( 'input', this.footer() ).on( 'keyup change clear', function () {            if ( that.search() !== this.value ) {                that                    .search( this.value )                    .draw();            }        } );    } );上面的代码工作正常。但是，由于该表使用服务器端处理，因此通过按键进行搜索的成本太高。因此，我尝试更改代码，以便它按 Enter 键进行搜索：table.columns().every(function () {    var that = this;    $('input', this.footer()).keypress(function (e) {        if (e.keyCode == 13) { //search only when Enter key is pressed to avoid wasteful calls            e.preventDefault(); //input is within <form> element which submits form when Enter key is pressed. e.preventDefault() prevents this            if (that.search() !== this.value) {                that                    .search(this.value)                    .draw();            }        }    });});使用上面的代码，如果我编写一个搜索值并按 Enter 键，它将按预期进行搜索。但是，如果我为 编写搜索值column1但按 Enter 键column2，则不会使用 中的值执行搜索column1。这会导致用户需要在每一列上按 Enter 键才能添加/删除搜索值。用户无法先在所需列中写入搜索值，然后在其中一列上按 Enter 进行搜索。据我所知，该表存储了该值，并且只有在特定列上按 Enter 键后才会更新该值。我不知道如何解决这个问题。

Answer 1

我在帮助下解决了这个问题。我的数据表是服务器端的，具有动态生成的列，因此我需要从每个输入框获取输入值并搜索每个列。当我了解更多时，我会更新这个答案。

这是工作代码：

table.columns().every(function () {               

    $('input', this.footer()).keypress(function (e) {

        if (e.keyCode == 13) { //search only when Enter key is pressed to avoid wasteful calls

            e.preventDefault(); //input is within <form> element which submits form when Enter key is pressed. e.preventDefault() prevents this

            var header = table.table().header(); //header because I moved search boxes to header

            var inputBoxes = header.getElementsByTagName('input');

            $.each(data.columns, function (index) {

                var inputBoxVal = inputBoxes[index].value;

                table.column(index).search(inputBoxVal);

            });

            table.draw();

        }

    });

});

Answer 2

有两种方法可以解决这个问题：

• 用于activeElement查看哪些元素具有焦点，并进行相应的搜索。

• 在原始事件发生后设置一个计时器keyup，并在几秒钟后进行搜索：

var searchTimer;

table.columns().every( function () {

  var that = this;

  $( 'input', this.footer() ).on( 'keyup change clear', function () {

    if ( that.search() !== this.value ) {

      clearTimeout(searchTimer); // Reset timer

      var value = this.value;

      searchTimer = setTimeout(function() {

        that.search(value).draw();

      }, 3000); // Wait 3 seconds

    }

  });

});