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

Question

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

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

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

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

Answer 1

我能够在帮助下解决它。我的数据表是服务器端的动态生成列，所以我需要从每个输入框中获取输入值并搜索每一列。当我了解更多时，我会更新这个答案。这是工作代码：table.columns().every(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; $('input', this.footer()).keypress(function (e) {&nbsp; &nbsp; &nbsp; &nbsp; if (e.keyCode == 13) { //search only when Enter key is pressed to avoid wasteful calls&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault(); //input is within <form> element which submits form when Enter key is pressed. e.preventDefault() prevents this&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var header = table.table().header(); //header because I moved search boxes to header&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var inputBoxes = header.getElementsByTagName('input');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.each(data.columns, function (index) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var inputBoxVal = inputBoxes[index].value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; table.column(index).search(inputBoxVal);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; table.draw();&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});

Answer 2

有两种方法可以解决这个问题：用于activeElement查看哪些元素具有焦点，并相应地进行搜索。在您的原始事件之后设置一个计时器keyup，并在几秒钟后进行搜索：var searchTimer;table.columns().every( function () {&nbsp; var that = this;&nbsp; $( 'input', this.footer() ).on( 'keyup change clear', function () {&nbsp; &nbsp; if ( that.search() !== this.value ) {&nbsp; &nbsp; &nbsp; clearTimeout(searchTimer); // Reset timer&nbsp; &nbsp; &nbsp; var value = this.value;&nbsp; &nbsp; &nbsp; searchTimer = setTimeout(function() {&nbsp; &nbsp; &nbsp; &nbsp; that.search(value).draw();&nbsp; &nbsp; &nbsp; }, 3000); // Wait 3 seconds&nbsp; &nbsp; }&nbsp; });});