如何适应数据表示例“;多滤波器”;用于多表支持

How to adapt datatables example "multi-filter" for multi-table support

本文关键字：用于 支持 滤波器 何适应 数据表示      更新时间：2023-09-26

在成功地为一个表在我的系统中实现了datatables多重过滤器之后，我想为我的所有表实现它，这些表由几个选项卡组织，如图所示。

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

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)];}
});

现在，第一个选项卡（#tabs-0）运行良好，但其他选项卡则不正常。

也许部分

$("tfoot input")

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

那么，如何将这些列搜索绑定到它们指定的表？我错过了哪一部分？

干杯，通过

每当您想要隔离实例时，都从一个祖先元素开始，该元素只隔离所需的实例元素，我认为在您的情况下可能是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()
相关文章：