data-filter when first row is added through js

nockhigan

When adding the first row to a datatable through js the data-filter attribute from the added row is not detected. But if there is already data in the table at the time it is created that has a data-filter attribute on the column, when a new row is added through js the data-filter attribute is detected.

Example of the attribute being detected

Example of the attribute being ignored

Any idea how I can get the attribute to be detected if the first row is added through js?

Open the console to see that the filter is being picked up in the first case, but not the second.

nockhigan

Interestingly if you have a row with the data-filter attribute at the time the table is created, delete that row so there are no rows in the table, then add a row to the now empty table it will pick up the attribute in that case as well. So there must be a setting somewhere in the datatable that tells it to look for the attribute.

kthorngren

The HTML5 data attributes docs state this:

In order for the HTML 5 data-* attribute detection and processing to work correctly, all cells in a column must have the same attribute available

For your second example you don't have any rows with the HTML5 data attribute so when Datatables initializes it doesn't try to use those attributes.

delete that row so there are no rows in the table, then add a row to the now empty table it will pick up the attribute in that case as well.

I wasn't expecting that. Or if you change your template to use data-filter="2" you can search the first row with 1 and the added with 2. Cool.

One suggestion is to do what you explain and start with one HTML row then remove after initialization. Like this:
https://jsfiddle.net/3sL47u0y/

Kevin