DataTables row.add to specific index

Question

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?

Answer 1

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.

[0][1][2][3][4->][<-newRow]
[0][1][2][3->][<-newRow][4]
[0][1][2->][<-newRow][3][4]

Example, inserting a new row at the index where the mouse is clicked :

$("#example").on('click', 'tbody tr', function() {
    var currentPage = table.page();

    //insert a test row
    count++;
    table.row.add([count, count, count, count, count]).draw();

    //move added row to desired index (here the row we clicked on)
    var index = table.row(this).index(),
        rowCount = table.data().length-1,
        insertedRow = table.row(rowCount).data(),
        tempRow;

    for (var i=rowCount;i>index;i--) {
        tempRow = table.row(i-1).data();
        table.row(i).data(tempRow);
        table.row(i-1).data(insertedRow);
    }     
    //refresh the current page
    table.page(currentPage).draw(false);
});  

demo -> http://jsfiddle.net/mLh08nyg/

Answer 2

Another way is to insert the row, and then move the row in the DataTable row array to a position you specify before redrawing the Table:

// Define the row to insert (using your method of choice)
var rowInsert = $('#table-id').find('tr:last');
// Get table reference - note: dataTable() not DataTable()
var table = $('#table-id').dataTable();
// Get api
var dt = table.api();
// Insert row (inserted as the last element in aiDisplayMaster array)
dt.row.add(rowInsert);
// Get the array holding the rows
var aiDisplayMaster = table.fnSettings()['aiDisplayMaster'];
// Remove the last element in the array
var moveRow = aiDisplayMaster.pop();
// EITHER add row to the beginning of the array (uncomment)
//aiDisplayMaster.unshift(moveRow);
// OR add row to a specific index (in this case to index 3)
var index = 3;
aiDisplayMaster.splice(index, 0, moveRow);
// Redraw Table
dt.draw(false);