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

Retrieving row data after filtering JQuery Datatables

提问by proggrock

Seems like it should be easy but...

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

Does anyone know how to return the current rows from a filtered dataTable? The oTable.fnGetNodes()method returns allrows, where I just want the filtered (visible, but including paginated) ones

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

// 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

I checked: Retrieving visible data from Datatablesbut not much help there.

我检查过：从数据表中检索可见数据但没有太大帮助。

采纳答案by proggrock

Figured out the answer, if anyone ever needs this:

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

First, using this datatables extension to get all the hidden rows:

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

$.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;
}

Then filter out the hidden nodes to get only visible nodes:

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

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

回答by Joe Bergevin

The easiest way to do this is actually built right in to the DataTables API:

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

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

Used in a Function:

在函数中使用：

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

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

回答by anagnostatos

As of Datatables 1.10, there is a built-in way to get the filtered or unfiltered rows after a search.

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

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

There are other options for getting only the current page or all pages as well as the order. More details here: http://datatables.net/reference/type/selector-modifier

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

回答by nsheaps

Better late than never but I was struggling with this myself. Here's what I came up with

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

$.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;

}

回答by AlecBoutin

If you're trying to get the actual tr DOM elements instead of the data, the solution is similar to the underscore solutions provided above, but you use the $ method instead.

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

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

More information is available on the API documentation page. http://datatables.net/api

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

回答by XavDeb

Thanks AlecBoutin, that's the easiest way.
I am trying to search into multiple tables arranged in tabs, and I want to display the table where a result is found. Quite easy with your solution

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

you can then navigate into whatever parent you need with the parents() jquery. (here I'm choosing the 2nd div parent encountered)

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

回答by Prasad Hewage

You can get the visible rows list changing the fnGetHiddenTrNodes function as follows.

您可以通过更改 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;
        }

回答by user3730564

Having the table setup this worked for me having a checkbox with the id for each row and another check box that will select all rows either when a filtered has been applied(just filtered rows) or not (all rows)

设置表格对我有用，每个行都有一个带有 id 的复选框，另一个复选框将在应用过滤（仅过滤行）或不应用（所有行）时选择所有行

$(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);
         } 
      });
});