I'm replacing row items like this:
var $targetRow = $(entity.row),
dataTable = $targetRow.closest('table.dataTable').DataTable();
dataTable.row($targetRow).remove();
dataTable.row.add({ foo: 1 }).draw();
I have logic in the rowCreated
callback bound to the table, thus I'm recreating the row to make use of it. This works fine. But row.add
always adds the regenerated row last in the list. Is there any way to insert it into a specific index?
dataTables holds its rows in an indexed array, and there is no API methods for adding a new row at a specific index or change the
index()
of a row.That actually makes good sense since a typical dataTable always is sorted / ordered or filtered on data, not the static index. And when you receive data from a server, or want to pass data to a server, you never use the static client
index()
either.But if you think about it, you can still reorder rows and by that insert a row at a specific index very easy by code, simply by reordering the data. When a new row is added, swap the data from the last row (the inserted row) to the second last row, then swap data from the second last row to the third last row and so on, until you reach the index where you want to insert the row.
Example, inserting a new row at the index where the mouse is clicked :
demo -> http://jsfiddle.net/mLh08nyg/