My datatable by default sorting for 1 column. Dynamically I am adding row to the table, row is adding sometimes in middle of table, sometime add to 2 page .. etc because first column is name.

But I want add top of the table or last of the table. Can we do that? How?

var t = $('#tblRoster').DataTable();
t.row.add( [memberCustomerName, memberPosition,memberMasterCustomer,
    memberCustomerEmail, endDate,'<a href="#" class="linkbutton 
    padding-left-20" id="addCancelButton">Remove</a>']).draw( false );

My datatable by default sorting for 1 column. Dynamically I am adding row to the table, row is adding sometimes in middle of table, sometime add to 2 page .. etc because first column is name.

But I want add top of the table or last of the table. Can we do that? How?

var t = $('#tblRoster').DataTable();
t.row.add( [memberCustomerName, memberPosition,memberMasterCustomer,
    memberCustomerEmail, endDate,'<a href="#" class="linkbutton 
    padding-left-20" id="addCancelButton">Remove</a>']).draw( false );

• javascript
• jquery
• datatables

1 Answer 1

Position of newly added data in entirely based on the ordering condition applied to the DataTable.

Suppose you want to add Row at last of the DataTable. So you need to take following steps:

1. Add New Row in DataTable.

2. Draw DataTable with specified order.

3. Move the page focus to last page of the DataTable (optional).

So you can achieve it this way.

$('#AddRow').on('click', function() {
     var row = ['testing', 'testing', 'testing', 'testing', 'testing', 'testing'];
     table.row.add(row).draw(false);
     table.order([1, 'asc']).draw();
     table.page('last').draw(false);
});

Here is its Demo