Unexpected result of column().data() when loading data with ajax

catrone

DataTables version: 1.10.6

What I want to do: load data dinamically via ajax, sum the values of some columns and put the sum in the footer.

The idea was to use column(X).data() to get the content of a column, then use

.reduce( function (a,b) { return a + b; })

as reported in the documentation of the column().data() method to calculate the sum, and then to use

column(X).footer()

to set the sum to the correct footer cell.

Since using ajax.load() requires a .draw() to redraw the new values, I thought the best place the code was inside the "drawCallback" callback.

Since I received some errors regarding the "reduce" function (Uncaught TypeError: Reduce of empty array with no initial value) when placing the code inside the "drawCallback" but I got the correct array if calling column(X).data() from the console, I decided to do some debugging.

By outputting the content of column(X).data() to the console (inside the drawCallback) I found that a draw event is launched every time a row of data is inserted, but the content of column(X).data() while inserting the ajax-loaded data was not a "simple" array of cell values.

Instead I got something like this (let's use a simple example with only a row with a single value of 748):

["784.00", context: Array[1], selector: Object, tables: function, table: function, draw: function…]

instead of

["784.00"]

If I use the same code after all the rows have been inserted, then I get the correct array of values (like the last one above) without context, selector and the other stuff.

Any idea why, during the redraw, the content of column(X).data() is not a simple array of values but a mixed array with the cell value and other information like the context, the selector, ...?

Is there a way to listen for an event that signals when ajax loaded data have been fully inserted in the table?