javascript - JQuery-DataTables-ColumnFilter 过滤问题

Question

我正在使用 JQuery-DataTables-ColumnFilter 插件。我有两个表，当我尝试过滤第一个表上的数据时，它正在另一个表(#example1)中搜索而不是( #示例 )

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

查询

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

        });
});