Loop through DataTables table to get all cells con

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?

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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/