I'm using Datatables to display some data. I also have inputs that are used to add a new row to the data. When I add this row, I reinitialise the table, and it automatically sorts the new row according to the sorting rules I give it. My question is this: Is there a way to get the data from the table in the order it's currently being viewed? Whenever I try $('#tableCompetitors').dataTable().fnGetData(), it gives me the data in the order it was added to the table not the ordered it's being presented in.

So is there an easy way to do what I want?

P.S. If it helps. The original datasource is an array of arrays that is provided from a textbox. I parse it, push it to an array, then use that array as the datasource.

I'm using Datatables to display some data. I also have inputs that are used to add a new row to the data. When I add this row, I reinitialise the table, and it automatically sorts the new row according to the sorting rules I give it. My question is this: Is there a way to get the data from the table in the order it's currently being viewed? Whenever I try $('#tableCompetitors').dataTable().fnGetData(), it gives me the data in the order it was added to the table not the ordered it's being presented in.

So is there an easy way to do what I want?

P.S. If it helps. The original datasource is an array of arrays that is provided from a textbox. I parse it, push it to an array, then use that array as the datasource.

• javascript
• jquery
• datatables

• if you save sort state would it matter what order data source is in? – charlietfl Commented Feb 12, 2013 at 1:49
• What do you mean by save sort state? I need the data after it's sorted so I can create a document structure based on the sorted data. – Frank B Commented Feb 12, 2013 at 1:53

3 Answers 3

I came across this with the same question. While the accepted solution may work, I found a better way:

$("example").DataTable().rows({search:'applied'}).data()

See selector-modifier documentation for more information.

Here is one solution using 3 of the API callbacks.

1. Create variable for CurrentData
2. Reset CurrentData to empty array within fnPreDrawCallback which fires before the new table is rendered
3. fnRowCallback gives access to array of data for each row, push that array into CurrentData array
4. fnDrawCallback fires after table rendered, can now access sorted data in CurrentData array

JS

  var currData = [];
  $('#example').dataTable({
    "fnPreDrawCallback": function(oSettings) {
        /* reset currData before each draw*/
        currData = [];
    },
    "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
        /* push this row of data to currData array*/
        currData.push(aData);

    },
    "fnDrawCallback": function(oSettings) {
        /* can now access sorted data array*/
        console.log(currData)
    }
});

DEMO: http://jsfiddle.net/ne24B/

Just trying to give you another option.

The following will get all the rows in the table, even if they are filtered out:

var currData = [];
var oTable = $('#example').dataTable();

oTable.$("tr").each(function(index, row){
    //generate your array here
    // like $(row).children().eq(0) for the first table column
    currData.push($(row).children().eq(0));
    // return the data in the first column
    currData.push($(row).children().eq(0).text());
});

or if you just want the results that match the filter then:

var currData = [];
var oTable = $('#example').dataTable();

oTable.$("tr", {"filter":"applied"}).each(function(index, row){
    //generate your array here
    // like $(row).children().eq(0) for the first table column
    currData.push($(row).children().eq(0));

    // return the data in the first column
    currData.push($(row).children().eq(0).text());
});

currData will contain the sorted list of the first column data.

Edit: To get the entire row's text into the array.

$(row + " td").each(function(index, tdData){
    currData.push($(tdData).text());
});

or

$(row).children().each(function(index, tdData){
    currData.push($(tdData).text());
});

This way you have a little more control on what the array can contain. My 2 cents.