JQuery-DataTables-ColumnFilter 过滤问题答案

【问题标题】：JQuery-DataTables-ColumnFilter filteration issueJQuery-DataTables-ColumnFilter 过滤问题
【发布时间】：2015-08-04 08:25:05
【问题描述】：

我正在使用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']  }
                ]

        });
});

【问题讨论】：

你是如何过滤的？你在哪里输入关键字？
当我使用 dataTable().columnFilter 时，过滤器适用于所有指定列的表页脚
你能建立一个fiddle 来显示问题吗？它应该像 example 那样工作。
@Raidri 我需要与上面示例中显示的相同的功能
然后复制该示例中的代码。如果这不起作用，我们需要从您的页面中查看更多信息以提供帮助。

标签： javascript jquery jquery-datatables datacolumn

【解决方案1】：

一张桌子以上完全没有问题。

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

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

        });
});

【讨论】：

【解决方案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']  }
            ]

        });
    }());

});

【讨论】：

【解决方案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>

【讨论】：