columns().every() and search()

reimax

Hi,
i try use datatable and jo jquery. I need add search to columns. my code:
var datatable = new DataTable('.table', {});

datatable.columns().every( function () {
var that = this;

    document.querySelectorAll('input[type=text]', this.footer() ).forEach(function(element) { 
        element.addEventListener("keyup", function(event) {
            event.preventDefault();
            if ( that.search() !== this.value ) {
                console.log(this.value );
                that.search( this.value ).draw();
            }
        });
    });
});

this not work and i need help.

kthorngren

this not work and i need help.

What exactly happens? Do you get errors in the browser's console?

Please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

reimax

there are no errors, just when entering text in the column search - the rows in the table disappear, as if I entered a value that is not in the column.

kthorngren

Here is a working example. If that doesn't help then please provide a link to your page or a test case replicating the issue so we can take a look.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

reimax

yes, this example work, but if i use jquery.
i try to work without jquery. How to rewrite it to make it work on vanilla js?

reimax

http://live.datatables.net/tihiwece/2/edit?html,css,js,console,output

kthorngren

The problem is for each column (table.columns().every( function () {) you are selecting all the inputs. When you type into one column its causing all columns to be searched. You can see this with the added console.log in this example:
http://live.datatables.net/tihiwece/3/edit

Loop through each of the input elements then, using the index parameter of forEach(), setup the column().search(). Like this:
http://live.datatables.net/rodeguto/1/edit

Kevin

reimax

yes, it work!
tnx