Columns Individual Search

Columns Individual Search

svrpsvrp Posts: 4Questions: 1Answers: 0
edited May 2021 in DataTables

Hi.

I'm trying to make a column search for individual columns

https://jsfiddle.net/gdzjpcv4/1/

And I have this code that is called on a document ready function from jquery.

However, when I start searching on one of these fields, my table disappears. Any help on this?

Thank you.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    You can't add a footer after DataTables has been initialised. What you'll need to do is add the header first (or put it in the HTML) - then clone that, insert the input elements and then finally initialise the DataTable.

    Allan

  • svrpsvrp Posts: 4Questions: 1Answers: 0
    edited May 2021

    Hi Allan,

    Thank you for your reply.

    I already tried that and I put the inicialization of headers on HTML, however, as you can see here: https://jsfiddle.net/4pLg6xdr/1/
    The same happens, even without that clone. The table disappears when I start writing on the search inputs.

  • svrpsvrp Posts: 4Questions: 1Answers: 0

    One more example,
    I tried to modify I bit.

    https://jsfiddle.net/4pLg6xdr/5/

    I delete some scroll functions and now the table does not disappear but It does not make the search properly (it does not appear the row that I search).

    I'm doing anything wrong?

    the colIdx gives me the correct value and also the this.value of my search.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    Answer ✓

    As you can see in your debug, your searching on both columns - your code becomes

                  table
                      .columns( [0, 1] )
                      .search( this.value )
                      .draw();
    

    DataTables searches are ANDs - so as it's looking for the same string in both columns, nothing is matched. You need to search on the one column where the input element is.

    This example is doing what you want to do: https://datatables.net/examples/api/multi_filter.html

    Colin

  • svrpsvrp Posts: 4Questions: 1Answers: 0

    Yes it was that the problem.

    I made an example with the solution, so I can help any other with the same problem:

    https://jsfiddle.net/4pLg6xdr/5/

    The working solution is on the link above. Thanks.

This discussion has been closed.