JQuery-DataTables-ColumnFilter filteration issue

Question

I am using JQuery-DataTables-ColumnFilter plugin.I am having two tables, when i am trying to filter data on first table , it is searching in another table(#example1) instead of (#example enter image description here )

$(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']  }
                ]

        });
});

As I am using dataTable().columnFilter, Filter is applied to table footer with all specified columns — Code Hungry
– Code Hungry, Commented May 25, 2015 at 11:11
Can you build a fiddle which shows the problem? It should work like in this example. — Raidri
– Raidri, Commented May 25, 2015 at 12:34
@Raidri I need same functionality what is shown in above example — Code Hungry
– Code Hungry, Commented May 26, 2015 at 7:37
Then copy the code from that example. And if that doesn't work, we need to see more from your page to help. — Raidri
– Raidri, Commented May 26, 2015 at 8:36

yeyene · Accepted Answer · 2015-05-29 07:42:22Z

No problem at all with more than one table.

Make sure IDs tables and IDs in 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']  }
                ]

        });
});

mehany · Accepted Answer · 2015-05-28 07:21:01Z

Can you try wrapping your code in a IIFE and see what happens! maybe its a scope conflict!.. something like so

$(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']  }
            ]

        });
    }());

});

bjaksic · Accepted Answer · 2015-05-29 18:04:59Z

0

I think the problem lies in the version differences. I've made a working example so you can test it out.

JsFiddle

Here are 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>

answered May 29, 2015 at 18:04

bjaksic

3,3331 gold badge12 silver badges13 bronze badges

Collectives™ on Stack Overflow

JQuery-DataTables-ColumnFilter filteration issue

3 Answers 3

HTML

Jquery

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

HTML

Jquery

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related