indvidual column search (text input) not working with Javascript sourced data?

indvidual column search (text input) not working with Javascript sourced data?

AndersHPAndersHP Posts: 36Questions: 14Answers: 1

Hi,

First of all im not sure i can provide an example - its a bit too complicated for that... :/

Im adding data to the table is the same way as in the following example(https://datatables.net/examples/data_sources/js_array.html), except the data comes form asp.net web api, which should make no difference. I need to do it this way, since the column names and amout varies.

It works perfectly fine by itself - but when i try to add individual column search like in this example (https://datatables.net/examples/api/multi_filter.html) it doesnt work too well. The search functions stop working, and the footer with the inputs, are added like another row in the bottom, and not "fixed" like in the example.

Here is what happens in cronological order:

  1. create a new completely empty table with few attributes
  2. instantiate datatables onto it
  3. append tfoot, tr,th to the table
  4. add input fields to these footers
  5. add the search function.

I know i normally should add the inputs to the footers, before instantiation the Datatables, but i dont see how i can do it, when there is basically just an empty table.

Like i said, it works perfectly without adding the individual column search function, so i guess its because i somehow fuck up the dom...

Any suggestions are welcome.

This question has accepted answers - jump to:

Answers

  • daniel_rdaniel_r Posts: 460Questions: 4Answers: 67

    Without getting into your current issue, you can try my yadcf plugin for datatables for your purpose

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin
    Answer ✓

    DataTables has no option to dynamically create footer elements if the table is empty on initialisation - only the column headers. So what you would need to do is use a little bit of jQuery to insert the required footer before the table is initialised. A simple $(...).append( '<tfoot><tr><td>...</td>...</tr></tfoot>' ) would do it. Then the "standard" method shown in the example could be used directly.

    Allan

  • r3z0nater3z0nate Posts: 2Questions: 0Answers: 1
    Answer ✓

    You could do this server side, it might be easier to dynamically create a table instead

This discussion has been closed.