JQuery-DataTables-ColumnFilter Filter Error

Question

I am using the JQuery-DataTables-ColumnFilter plugin. I have two tables, when I try to filter the data in the first table, it looks in another table (# example1) instead of (#example )

 $(document).ready(function(){ $('#example').dataTable() .columnFilter({ aoColumns: [ {type: "text"}, { type: "text" }, { type: "text" }, { type: "number" }, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, { type: "select", values: [ 'A', 'C', 'U', 'X'] } ] }); $('#example1').dataTable() .columnFilter({ aoColumns: [ {type: "text"}, { type: "text" }, { type: "text" }, { type: "number" }, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, { type: "select", values: [ 'A', 'C', 'U', 'X'] } ] }); }); 

Answer 1

No problem with more than one table.

Verify that the ID tables and identifiers in the function call are identical.

HTML

 <table id="example" cellpadding="0" cellspacing="0" border="0" class="display" style="width:980px"> ... </table> <table id="example1" cellpadding="0" cellspacing="0" border="0" class="display" style="width:980px"> ... </table> 

Jquery

 $(document).ready(function(){ $('#example').dataTable() .columnFilter({ aoColumns: [ {type: "text"}, { type: "text" }, { type: "text" }, { type: "number" }, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, { type: "select", values: [ 'A', 'C', 'U', 'X'] } ] }); $('#example1').dataTable() .columnFilter({ aoColumns: [ {type: "text"}, { type: "text" }, { type: "text" }, { type: "number" }, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, { type: "select", values: [ 'A', 'C', 'U', 'X'] } ] }); }); 

Answer 2

Can you try wrapping your code in IIFE and see what happens! perhaps it’s a conflict in scope! .. something like this

 $(function(){ ;(function(){ $('#example').dataTable().columnFilter({ aoColumns: [ {type: "text"}, { type: "text" }, { type: "text" }, { type: "number" }, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, { type: "select", values: [ 'A', 'C', 'U', 'X'] } ] }); }()); ;(function(){ $('#example1').dataTable().columnFilter({ aoColumns: [ {type: "text"}, { type: "text" }, { type: "text" }, { type: "number" }, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, {type: "text"}, { type: "select", values: [ 'A', 'C', 'U', 'X'] } ] }); }()); }); 

Answer 3

I think the problem is version differences. I made a working example so you can check it out.

Jsfiddle

Here are the versions (from JsFiddle) that worked for me:

 <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css"> <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script> <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>