Column filter with dynamic data

Column filter with dynamic data

lalounelaloune Posts: 16Questions: 3Answers: 0

Hello,

I don't get why I cannot get my script working, I use 2 objects for the columns and the data, then try to use the column filter. Here my fiddle:
https://jsfiddle.net/L3j41cng/

is this actually possible what I want to achieve ? When defining the rows of the table manually (like here: https://jsfiddle.net/cjwbnf2L/2/) it works without problem.

many thanks in advance!

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974
    Answer ✓

    The problem with the first example is you don't have a thead when trying to clone it using this:

        $('#example thead tr').clone().appendTo('#example thead');
    

    Using columns.title creates the header. You will need to build the second header after initialization, in initComplete. But using clone() will also clone the sorting elements. One option is to loop through the header to get the column names, or loop through the header variable to get then names, then build a new header from those names.

    Kevin

  • lalounelaloune Posts: 16Questions: 3Answers: 0

    thanks a lot for your support!

    to avoid the cloning of the sorting elements I removed the class (I found that elsewhere on the forum)

    but the search boxes stay desperately absent... I don't get it:
    https://jsfiddle.net/mLp70t1a/2/

  • lalounelaloune Posts: 16Questions: 3Answers: 0

    it really looks that scrollY and the double thead row are not compatible...

    https://jsfiddle.net/p31yguzs/

    when commenting "scrollY: 500px" out I get the search boxes (but without the header fixed). Is what I need to achieve actually possible ? I'm begining to doubt

  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974
    Answer ✓

    Using the Datatables scrolling features does add some complexity. Datatables clones the header, displays the cloned header as part of a new table and hides the original. For this case you will need to clone the new scrolling header and append to it. See this updated example for one way to do this:
    https://jsfiddle.net/fd09yjhr/

    To see this you can inspect the table and header, both with and without scrollY, to see what Datatables does. If you run your example you should see your cloned header with the inputs as part of the hidden thead.

    Kevin

  • lalounelaloune Posts: 16Questions: 3Answers: 0

    hello Kevin,

    thanks a ton! this works perfectly now, and thanks to your explanations I could analyze the behaviour further. This helped a lot.

    Greets from Germany

This discussion has been closed.