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

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

LukasLLukasL Posts: 14Questions: 6Answers: 0

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!

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040
    Answer ✓

    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

  • LukasLLukasL Posts: 14Questions: 6Answers: 0

    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.

  • LukasLLukasL Posts: 14Questions: 6Answers: 0
    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?

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

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

    Kevin

  • LukasLLukasL Posts: 14Questions: 6Answers: 0
    edited April 7

    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.

  • kthorngrenkthorngren Posts: 8,931Questions: 25Answers: 2,040

    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

Sign In or Register to comment.