在使用JQuery Datatables进行筛选后检索行数据

Question

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

有没有人知道如何从筛选后的数据表中返回当前行？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

我查看了：Retrieving visible data from Datatables，但是帮助不大。

- proggrock

Answer 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

- anagnostatos

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

- Joe Bergevin

---

FYI - 这似乎无法与新的API一起使用，例如 $("#mydatatable").DataTable()._('tr',...); 会出现 TypeError: $(...).DataTable(...)._ is not a function。 - user9645

Answer 3

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

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

更多信息可以在API文档页面上找到。http://datatables.net/api

- AlecBoutin

---

当使用$('tr', { "filter": "applied" })应用过滤器时，如何获取DOM元素，例如fnGetNodes()？ - Gopi

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

Answer 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;

}

- nsheaps

Answer 5

找到了答案，如果有人需要的话：

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

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

- proggrock

---

非常好。非常感谢。+1给你。 - PSR

-1 表示仅显示可见行，分页行不包括在内。 - gamliela

代码太多了。DataTables实际上已经通过使用下划线函数将其内置到其API中了。 - Joe Bergevin

请查看下面的 _('tr', {"filter": "applied"})。 - jjwdesign

Answer 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父级元素）

- XavDeb

Answer 7

在表格设置好后，我使用了一个带有每行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);
         } 
      });
});

- user3730564

Answer 8

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

- Prasad Hewage

Answer 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

- Pixs Nguyen