Geek Answers Handbook

Get data from Datatables.net after sorting

I am using datatables to display some data. I also have tabs that are used to add a new row to the data. When I add this row, I reinitialize the table and it automatically sorts the new row according to the sorting rules that I give them. My question is this: is there a way to get the data from the table in the order in which it is currently being viewed? Whenever I try $('#tableCompetitors').dataTable().fnGetData() it gives me the data in the order in which it was added to the table, and not in an ordered view.

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

PS If it helps. The original data source is an array of arrays that is provided from a text field. I parse it, click on an array, and then use this array as a data source.

+7
source share
3 answers

Here is one solution using 3 API callbacks.

  • Create Variable for CurrentData
  • Reset CurrentData for an empty array inside fnPreDrawCallback , which starts before rendering a new table.
  • fnRowCallback provides access to the data array for each row, pushes this array into the CurrentData array
  • fnDrawCallback triggered after the table is displayed, now you can access the sorted data in the 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/

+7
source

I came across this with the same question. Although the decision made may work, I found a better way:

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

See the selector-modifier documentation for more information.

+7
source

Just try to give you another option.

All rows in the table are listed below, even if they are filtered:

 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 want the results to match the filter, follow these steps:

 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 a sorted list of the first column data.

Edit: To get all the string text in an 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 bit more control over what the array can contain. My 2 cents.

+2
source

More articles:


All Articles