输入键问题上的数据表单个列搜索答案

【问题标题】：Datatables individual column search on Enter key issue输入键问题上的数据表单个列搜索
【发布时间】：2020-07-19 23:50:36
【问题描述】：

按 Enter 键时，我在使用单个列搜索实现数据表时遇到问题。

起初，我使用Datatables guide 来实现它，如下所示：

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 编写搜索值，但在column2 上按回车，它不会使用column1 中的值执行搜索。这导致用户需要在每列上按 Enter 以添加/删除搜索值。用户无法先在所需列中写入搜索值，然后在其中一个列上按 Enter 进行搜索。

根据我收集到的信息，该表存储了该值，并且在特定列上按下 Enter 之前它不会更新。我不知道如何解决这个问题。

【问题讨论】：

标签： javascript jquery html datatables

【解决方案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();
        }
    });
});

【讨论】：

【解决方案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
    }
  });
});

【讨论】：