Question

在我的系统成功实施datatables multi-filter一个表后，我想为我的所有表实现它，这些表由多个标签组织，如shown here。

为了达到这个目的，我想我必须设置三个单独的变量：

var oTable0 = $('#tabs-0 table.display').dataTable({
var oTable1 = $('#tabs-1 table.display').dataTable({
var oTable2 = $('#tabs-2 table.display').dataTable({

对于过滤，我应该需要：

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
  oTable0.fnFilter( this.value, $("tfoot input").index(this) );
  oTable1.fnFilter( this.value, $("tfoot input").index(this) );
  oTable2.fnFilter( this.value, $("tfoot input").index(this) );
});

对于表格页脚，我还必须个性化行。这是第一个表的示例：

<th>
  <input type="text" name="search_tabs0_rfid" value="Search column" class="search_init0" />
</th>
<th>
  <input type="text" name="search_tabs0_art" value="Search column" class="search_init0" />
</th>
...

为了适应用户友好性部分，我想到了：

$("tfoot input").each( function (i) {
    asInitVals0[i] = this.value;
    asInitVals1[i] = this.value;
    asInitVals2[i] = this.value;
});

$("tfoot input").focus( function () {
    if ( this.className == "search_init0" ){ this.className = ""; this.value = "";}
    if ( this.className == "search_init1" ){ this.className = ""; this.value = "";}
    if ( this.className == "search_init2" ){ this.className = ""; this.value = "";}
});

$("tfoot input").blur( function (i) {
    if ( this.value == "" ){ this.className = "search_init0"; this.value = asInitVals0[$("tfoot input").index(this)];}
    if ( this.value == "" ){ this.className = "search_init1"; this.value = asInitVals1[$("tfoot input").index(this)];}
    if ( this.value == "" ){ this.className = "search_init2"; this.value = asInitVals2[$("tfoot input").index(this)];}
});

现在，第一个Tab（＃tabs-0）工作正常，但其余的不是。

也许是部分

$("tfoot input")

是一个问题，因为这会发生在三个单独表中的每一个中。

那么，我怎样才能将这些列搜索绑定到指定的表？我错过了哪一部分？

干杯， thowi

Answer 1

每当你想要隔离实例时，从一个祖先元素开始，该元素只隔离你认为可能是tfoot的实例元素。

$("tfoot input").blur( function (i) {
    /* traverse up the document tree to ancestor needed*/
    var $parent=$(this).closest('tfoot');
    /* index only the inputs in current parent tfoot*/
    var index=$parent.find('input').index(this);
    /* more code*/
});

如果您需要与dataTables API进行互动...可以查看表格本身并执行以下操作：

$parent.closest('table').datatables_API_method()

如何使数据表示例“多过滤器”用于多表支持

1 个答案: