过滤 JQuery 数据表后检索行数据

Posted 2023-05-07

【中文标题】过滤 JQuery 数据表后检索行数据

【英文标题】：Retrieving row data after filtering JQuery Datatables

【发布时间】：2012-10-06 15:05:47

【问题描述】：

看起来应该很容易，但是......

有谁知道如何从过滤后的数据表中返回当前行？ oTable.fnGetNodes() 方法返回 all 行，我只想要过滤（可见，但包括分页）的行

// filter on division
var oTable = $('#summary-table').dataTable();
oTable.fnFilter(division_text, 2, true);

// Get the nodes from the table  
var nNodes = oTable.fnGetNodes(); // <-- still retrieves original list of rows

我检查了：Retrieving visible data from Datatables，但没有太多帮助。

【参考方案1】：

从 Datatables 1.10 开始，有一种内置方法可以在搜索后获取过滤或未过滤的行。

var table = $('#example').DataTable();
table.rows( search:'applied' ).nodes();
table.rows( search:'removed' ).nodes();

还有其他选项可以仅获取当前页面或所有页面以及订单。 更多细节在这里： http://datatables.net/reference/type/selector-modifier

【参考方案2】：

最简单的方法实际上是内置在DataTables API中：

_('tr', "filter": "applied")

在函数中使用：

function get_filtered_datatable() 
    var filteredrows = $("#mydatatable").dataTable()._('tr', "filter": "applied");

    for ( var i = 0; i < filteredrows.length; i++ ) 
        debug.console(filteredrows[i]);
    ;

【讨论】：

仅供参考 - 这似乎不适用于新的 API，例如$("#mydatatable").DataTable()._('tr',...); 给TypeError: $(...).DataTable(...)._ is not a function

【参考方案3】：

如果您尝试获取实际的 tr DOM 元素而不是数据，则该解决方案类似于上面提供的下划线解决方案，但您使用 $ 方法代替。

function getFilteredDatatable() 
    return $("table.dataTable").dataTable().$('tr',  "filter": "applied" );

API 文档页面上提供了更多信息。 http://datatables.net/api

【讨论】：

如何在使用 $('tr', "filter": "applied" ) 应用过滤器时获取 fnGetNodes() 之类的 DOM 元素？

.$() 返回的对象是一个 jQuery 对象。您可以使用 .get() 方法将其转换为数组，这是从 fnGetNodes() 返回的内容。 link

【参考方案4】：

迟到总比没有好，但我自己也在为此苦苦挣扎。这是我想出的

$.fn.dataTableExt.oApi.fnGetVisibleData = function()
    displayed = [];
    currentlyDisplayed = this.fnSettings().aiDisplay; //gets displayed rows by their int identifier
    for (index in currentlyDisplayed)
        displayed.push( this.fnGetData( currentlyDisplayed[index] ));
    
    return displayed;

【参考方案5】：

想出答案，如果有人需要这个：

首先，使用这个数据表扩展来获取所有隐藏的行：

$.fn.dataTableExt.oApi.fnGetHiddenTrNodes = function (oSettings, arg1, arg2) 

/* Note the use of a DataTables 'private' function thought the 'oApi' object */

var anNodes = this.oApi._fnGetTrNodes(oSettings);
var anDisplay = $('tbody tr', oSettings.nTable);

/* Remove nodes which are being displayed */
for (var i = 0; i < anDisplay.length; i++) 
    var iIndex = jQuery.inArray(anDisplay[i], anNodes);

    if (iIndex != -1) 
        anNodes.splice(iIndex, 1);
    


/* Fire back the array to the caller */
return anNodes;

然后过滤掉隐藏节点，只得到可见节点：

 var rows = oTable.fnGetNodes(); // get all nodes            
 var rows_hidden = oTable.fnGetHiddenTrNodes(); // get all hidden nodes

 var result = [], found;

 // remove hidden nodes from all nodes
 for (var i = 0; i < rows.length; i++) 
  found = false;
    for (var j = 0; j < rows_hidden.length; j++) 
      if (rows[i] == rows_hidden[j]) 
        found = true;
          break;
                
            
            if (!found) 
                result.push(rows[i]); 
            
    

【讨论】：

太好了。非常感谢。+1 为你

-1 这仅显示可见行。不包括分页行。

代码太多了。 DataTables 实际上通过使用下划线函数将其内置到他们的 API 中。

参见下面的 _('tr', "filter": "applied")。

【参考方案6】：

感谢 AlecBoutin，这是最简单的方法。 我正在尝试搜索以选项卡排列的多个表，并且我想显示找到结果的表。 您的解决方案很容易

    // make the global search input search into all tables (thanks to a class selector)
    $('#oversearch').on( 'keyup', function () 
        $('.table').DataTable().search( this.value ).draw();

        var row = $('.table').DataTable().$('tr',  "filter": "applied" );
        console.log(row.parents("div")[1]);
    );

然后您可以使用 parents() jquery 导航到您需要的任何父级。 （这里我选择遇到的第二个 div 父级）

【参考方案7】：

您可以通过如下方式更改 fnGetHiddenTrNodes 函数来获取可见行列表。

 $.fn.dataTableExt.oApi.fnGetVisibleTrNodes = function (oSettings, arg1, arg2) 

            /* Note the use of a DataTables 'private' function thought the 'oApi' object */

            var anNodes = this.oApi._fnGetTrNodes(oSettings);
            var anDisplay = $('tbody tr', oSettings.nTable);
            var visibleNodes = [];

            for (var i = 0; i < anDisplay.length; i++) 
                var iIndex = jQuery.inArray(anDisplay[i], anNodes);

                if (iIndex != -1) 
                    visibleNodes.push(anDisplay[i]);
                
            

            /* Fire back the array to the caller */
            return visibleNodes;
        

【参考方案8】：

设置表对我有用>

$(document).ready(function() 
    var myDataTableHandle = $('#example').dataTable("bPaginate": false);

   $('#selectAllCheckBox').click(function() 
       if($(this).is(':checked')) 
          var filteredRows  =   myDataTableHandle._('tr', "filter":"applied");
          alert( filteredRows.length +' nodes were returned' );     
          $(myDataTableHandle.fnGetNodes()).find($('input[name=idCheckBox]')).each(function () 
              $(this).prop('checked', true);
           );
        else 
          $('input[name=idCheckBox]:checked').prop('checked', false);
          
      );
);

【参考方案9】：

我曾经在 1.10.x 版本中使用 Datatable

var table = $('#example').DataTable();
var filtered_data = table.rows( search:'applied' ).data();
var removed_data = table.rows( search:'removed' ).data();

检查示例Codepen