DataTables fnFilter not working after updating table with jQuery

Question

I use DataTables jQuery library, for a table in my project.

To customise filtering I've added span tags with filter words to my first column in each row. Example:

<span style="display:none;" id="spanFilter' + i + '">filterWord</span>

Then I use select to filter on these words.

$("#filterSelect").on('change', function () {
    oTable.fnFilter($("#filterSelect option:selected").val(), 0);
});

This works fine.

I also have code to change the filterWord of a #spanFilter .

$("#spanFilter" + i).text(spanFilterValue);

After changing the filterWord with jQuery the fnFilter does not work properly.

What am I doing wrong?

Answer 1

By looking at your code I believe you are using dataTables legacy version . If you just started using dataTables I'll strongly suggest you use the latest version.

Anyway, to reflect back in dataTables I'll strongly suggest you to use dataTables api to change the content of the table instead of using jQuery.

Note: Following example is for DataTables v1.9

$(document).ready( function () {

  var oTable = $('#table').dataTable();

  // get an array of the TR nodes that are used in table's body
  var nNodes = oTable.fnGetNodes();

  // iterating over each TR or row
  nNodes.forEach(function(node,index) {

    // update first column of every node
    oTable.fnUpdate(spanFilterValue,node,0);

  });

});

APIs References

• fnGetNodes
• fnUpdate