Loop through DataTables table to get all cells content

Question

I am using jquery dataTables to generate the paginated table on my site. I need to run a process that grabs all of the data out of a particular column. Something like :

$('.testLink').click(function(){
            var cells = new Array();
            $('#myTable tr td').each(function(){
                cells.push($(this).html());
            });
            console.log(cells);
        });

That example grabs everything but I would need just the information from one column of tds. I guess I could do that by adding a class to all of the tds in that row but I am sure there is a better way. That is a bonus question..

but what I really want to know is how to get this to work with datatables? Because the script hides most of the table to put in pagination this function only grabs the cells that are visible. I played around with fnGetData but I am not getting it. Any ideas?

what is objective?...getting row data not difficult from API and there are likely examples in the huge download package..post details and code attempts — charlietfl
– charlietfl, Commented Mar 7, 2012 at 19:01
yes getting all row data in an array then I need to use that data to run a query. I have been searching and trying stuff from API for hours but I cant get it so I wanted to give SO a whirl. — Zac
– Zac, Commented Mar 7, 2012 at 19:10

nobody · Accepted Answer · 2014-07-01 17:14:53Z

48

To access all the rows, you can do:

var rows = $("#myTable").dataTable().fnGetNodes();

In your case, this should work:

   $('.testLink').click(function(){
        var cells = [];
        var rows = $("#myTable").dataTable().fnGetNodes();
        for(var i=0;i<rows.length;i++)
        {
            // Get HTML of 3rd column (for example)
            cells.push($(rows[i]).find("td:eq(2)").html()); 
        }
        console.log(cells);
    });

edited Jul 1, 2014 at 17:14

nobody

20.3k17 gold badges59 silver badges80 bronze badges

answered Mar 7, 2012 at 19:11

Diego

18.5k5 gold badges67 silver badges68 bronze badges

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

5 Comments

Ohgodwhy Over a year ago

He doesn't want all rows. He wants a specific column in each node.

Greg Pettit Over a year ago

I can see how this answers the exact question asked, but I would further wonder what you want to do with those? Reason being, a lot of cell (row and column also) manipulation can be done during the DataTables rendering process using callbacks like fnRowCallback.

Fahim Parkar Over a year ago

but when sorting is applied on any column, your code don't give same data before sorting... which I believe is wrong...

Matias Over a year ago

Saved my life! I just wanna add if you are using a checkbox in a column to select the rows you can use this to get the row content $('input[name=checkboxID]:checked', $("#myDataTable").dataTable().fnGetNodes()).closest('tr'); and then use the iteration that Andrew posted. Cheers!

Nike Yulistia Angreni Over a year ago

But how if td is hidden. How to get the values?

charlietfl · Accepted Answer · 2012-03-07 19:39:19Z

6

Here's a method using fnGetData()

First get the data from plugin which will be all rows visible or not. Loop over each row data array, and push index=1( second cell) into new array

     oTable = $('#example').dataTable();

      var secondCellArray=[];
      $.each( oTable.fnGetData(), function(i, row){
          secondCellArray.push( row[1]);
    })

     console.log( secondCellArray)

EDit : working demo...look in console after render

http://live.datatables.net/apixiv/edit#javascript,html

edited Mar 7, 2012 at 19:39

answered Mar 7, 2012 at 19:31

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Comments

Blazemonger · Accepted Answer · 2012-12-18 21:42:00Z

4

jQuery.map combined with fnGetData() makes for a compact solution. The following function will return a one-dimensional array containing all the values from obj_dtable's nth column:

function getDataTableColumn(obj_dtable,n) {
    return $.map(obj_dtable.fnGetData(), function(val) {
        return val[n];
    });
};

edited Dec 18, 2012 at 21:42

answered Dec 18, 2012 at 21:34

Blazemonger

93.3k28 gold badges147 silver badges181 bronze badges

Comments

Ohgodwhy · Accepted Answer · 2012-03-07 19:11:28Z

1

You'll want to use the "EQ" selector. It starts at the index of "0", so if you have..

<tr>
  <td>0</td>
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>

Then by using

 $("td").eq(3); // last one
 $("td").eq(2); //returns "2"

Make sense?

http://api.jquery.com/eq-selector/

answered Mar 7, 2012 at 19:11

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

1 Comment

charlietfl Over a year ago

that won't work on a paginated table, rows not visible don't exist

Collectives™ on Stack Overflow

Loop through DataTables table to get all cells content

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related