DataTables row.add to specific index

Posted on

DataTables row.add to specific index – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and jquery. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about DataTables row.add to specific index.

Problem :

I’m replacing row items like this:

var $targetRow = $(entity.row),
    dataTable = $targetRow.closest('table.dataTable').DataTable();


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?

Solution :

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 :

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

    //insert a test row
    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 =,
        insertedRow = table.row(rowCount).data(),

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

demo ->

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)
// 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)
// OR add row to a specific index (in this case to index 3)
var index = 3;
aiDisplayMaster.splice(index, 0, moveRow);
// Redraw Table

Leave a Reply

Your email address will not be published. Required fields are marked *