Retrieving row data after filtering JQuery Datatables

Question

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 all rows, where I just want the filtered (visible, but including paginated) ones

// 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 Datatables but not much help there.

anagnostatos · Accepted Answer · 2015-04-29 17:27:00Z

20

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

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

answered Apr 29, 2015 at 17:27

anagnostatos

5554 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Joe Bergevin · Accepted Answer · 2013-09-03 20:23:38Z

16

The easiest way to do this is actually built right in to the 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]);
    };
}

answered Sep 3, 2013 at 20:23

Joe Bergevin

3,2885 gold badges29 silver badges34 bronze badges

1 Comment

user9645 Over a year ago

FYI - this seems to not work with the new API e.g. $("#mydatatable").DataTable()._('tr',...); gives TypeError: $(...).DataTable(...)._ is not a function

AlecBoutin · Accepted Answer · 2014-12-22 17:37:09Z

3

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.

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

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

answered Dec 22, 2014 at 17:37

AlecBoutin

1911 gold badge1 silver badge4 bronze badges

2 Comments

Gopi Over a year ago

How do I get the DOM element like the fnGetNodes() while applying filter using $('tr', { "filter": "applied" })?

AlecBoutin Over a year ago

The object returned from .$() is a jQuery object. You can you the .get() method to turn it into an array, which is what is returned from fnGetNodes(). link

nsheaps · Accepted Answer · 2013-07-30 14:12:36Z

2

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;

}

answered Jul 30, 2013 at 14:12

nsheaps

213 bronze badges

Comments

proggrock · Accepted Answer · 2012-10-16 14:43:04Z

1

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

answered Oct 16, 2012 at 14:43

proggrock

3,3097 gold badges38 silver badges51 bronze badges

3 Comments

gamliela Over a year ago

-1 This shows only visible rows. Paginated rows are not included.

Joe Bergevin Over a year ago

Way too much code. DataTables actually has this built in to their API by using the underscore function.

jjwdesign Over a year ago

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

XavDeb · Accepted Answer · 2020-01-27 12:55:42Z

1

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

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

answered Jan 27, 2020 at 12:55

XavDeb

1511 silver badge7 bronze badges

Comments

Prasad Hewage · Accepted Answer · 2013-06-19 04:32:48Z

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

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

user3730564 · Accepted Answer · 2015-03-13 12:56:25Z

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)

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

Pixs Nguyen · Accepted Answer · 2021-03-29 03:27:17Z

0

I used to Datatable in version 1.10.x

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

Check example Codepen

answered Mar 29, 2021 at 3:27

Pixs Nguyen

1341 silver badge5 bronze badges

Collectives™ on Stack Overflow

Retrieving row data after filtering JQuery Datatables

9 Answers 9

Comments

1 Comment

2 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

1 Comment

2 Comments

Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related