Using jQuery DataTables plugin, does fnAddData() add rows to the top or bottom of an html table?

Question

I have tested this and the reason I asked the question is that it seems to be doing different things for different tables.

I couldn't find any documentation on if this is configurable or not. I would have thought it would add the rows to the bottom, but I have a few examples where I see it adding rows at the top or even in the middle sometimes. It seems quite random.

Any ideas?

Answer 1

I have looked at the source code and fnAddData calls the internal method _fnAddData, which adds one row and if successful, returns its index in the table. _fnAddData adds the new row at the bottom (the index of the new row equals the number of the rows in the table).

However, fnAddData has an optional parameter to redraw the table taking into account the various features which are enabled. This parameter defaults to true and this is what probably causes the 'random' behavior.

Answer 2

Browsing through the source of Datatable, as explained by kgiannakaki. The method will append all new data rows to the end of the table as it should.

The reason for the "random" behavior, is as each time a new row is added the method will perform a "redraw" of the entire table unless otherwise specified. When this does so the table is run through multiple features such as filtering/sorting etc etc ... and completely rewritten to the page. Essentially I am going to guess you are adding random bits of data into new rows which may be creating the "random" effect, whenever a new row is added.

You can easily disable table redrawing by adding a second parameter in the fnAddData call which needs to be set to false.

$(this).fnAddData(data, false);

If this issue still persists I would file a bug for this issue, as their is no other reason for this behavior.

Answer 3

To disable sorting, so that a new row will be appended to the bottom of a table, add

"bSort": false

to (the top of) your DataTable initialization.