Individual column search on Enter key does not update other columns' values

LukasL

Hi there. I am having an issue with implementing Datatables with individual column search when pressing the Enter key.

I was able to implement it regularly from https://datatables.net/examples/api/multi_filter.html like this:

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();
            }
        } );
    } );

The code above works fine. However, because the table uses server-side processing, it's too expensive to search on keypress.

So, I am attempting to change the code so that it searches on Enter key:

            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();
                        }
                    }
                });
            });

With the code above, if I write a search value and press Enter, it searches as expected. However, if I write a search value in column1 but press enter on column2, it does not perform a search with the value in column1. This results in the user being required to press Enter on each column to add/delete the search value. The user is unable to first write search values in the desired columns and press Enter on one of them to search.

From what I've been able to gather, the table stores the value and it's not updated until Enter is pressed on the specific column. I am not sure how to get around this.

Thank you!

kthorngren

The column searches are independent of Datataables and Datatables knows nothing about the. If you hit enter in one input there is nothing that will automatically collect the others. You will need to update your input event to get the values for the columns. For each column use column().search() then when those are all prepared use draw() to have Datatables send all the column searches to the server for searching.

This example doesn't have search inputs but will give you an idea of what I mean:
http://live.datatables.net/yogadiku/1/edit

Kevin

LukasL

Thank you for your response kthorngren. I should mention my table generates columns dynamically, so I don't know how many columns my table will have. However, your response is helping me and I'm working towards figuring this out.

LukasL

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();
        }
    });
});

kthorngren, with your help, I was able to get the code to work! Should I mark your post or this post as answer?

kthorngren

You can mark both if you want. Not sure if you can mark your own as answered though.

Kevin

LukasL

Kevin, if Datatables knows nothing about the other inputs, why does column searching work with the original code? If I search a column and then another one, I get both columns' search values returned to the model.

kthorngren

if Datatables knows nothing about the other inputs, why does column searching work with the original code?

Because you are executing this in the event.

            if (that.search() !== this.value) {
                that
                    .search(this.value)
                    .draw();
            }

If I search a column and then another one, I get both columns' search values returned to the model.

Are you talking about with the original code you posted?

Datatables keeps track of the searches via column().search() and will send the search values for each column for each request to the server. This is independent of what values are in the inputs. You can see this in this example:
http://live.datatables.net/vilukojo/1/edit

Click the Search button and this code will execute:

   table.column(2).search('accountant').draw();
    console.log(table.columns().search());
    table.column(3).search('Tokyo').draw();
    console.log(table.columns().search());

The first search shows this:

r(6) ["", "", "accountant", "", "", "", context: Array(1), selector: {…}, tables: ƒ, table: ƒ, draw: ƒ, …]
0: ""
1: ""
2: "accountant"
3: ""
4: ""
5: ""

The second shows this:

r(6) ["", "", "accountant", "Tokyo", "", "", context: Array(1), selector: {…}, tables: ƒ, table: ƒ, draw: ƒ, …]
0: ""
1: ""
2: "accountant"
3: "Tokyo"
4: ""
5: ""

HTH,
Kevin

admin@mds.asia

How to achieve same on key press if search box move to header? I have tried with $('input', this.header()).keypress(function (e) {... but it's not working.

kthorngren

See this example:
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

Try removing the keyup event. If you still need help please provide a running test case showing the problem so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin