JQuery-DataTables-ColumnFilter过滤问题

Question

我正在使用JQuery-DataTables-ColumnFilter插件。我有两个表，当我尝试过滤第一个表上的数据时，它正在另一个表（＃example1）而不是（#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

对于多个表格没有任何问题。

确保函数调用中的ID表和ID相同。

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

您可以尝试将代码包装在IIFE中，看看会发生什么！也许这是一个范围冲突！类似的事情

$(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

我认为问题在于版本差异。我已经做了一个有效的例子，你可以测试一下。

JsFiddle

以下版本（来自JsFiddle）对我有用：

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