Add data to first row using jquery DataTables

Question

I'm using DataTables to display my data. I'm using fnAddData to add new data to row. This function inserts new row at the last of table. What I want is when I'm doing add new row, it become first row on the table. How can I do this?

This is my code:

$('#example').dataTable().fnAddData( [
                            caption,
                            grade,
                            "<span class='edit'>Edit</span><span class='delete'>Delete</span>",
                            id,
                            kind,
                            oTable.fnGetData().length ]
                        );

score 2 · Accepted Answer · answered Nov 10 '13 at 11:08

2

if is set "bSort": false, you can do something like this after your code

var my_array = $('#table').dataTable().fnGetNodes( );
var last_element = my_array[my_array.length - 1];
console.log(last_element);        
$(last_element).insertBefore($('#table tbody tr:first-child'));

answered Nov 10 '13 at 11:08

h0mayun

3,466
31
40

here i have used fnAddData like that -- var rowIndex = t.fnAddData(["c1","c2","c3","c4"]); now how we can append data on first row using your solution please write in brief.. – Sorav Garg Dec 10 '15 at 20:04

score 0 · Answer 2 · edited May 23 '17 at 12:17

If sorting is enabled then it will show up where the sort put its. So you would have to sort by the column that would bring it to the top.

If sorting is not enabled then it would be almost like: How to move a <tr> up or down within <table> via jQuery?

You could try the following if sorting is not enabled, I'm not sure this will work with the plugin, and you would be better off not using DataTables.net:

var oTable = $('#example').dataTable()
function MoveRowDown(tableId, index)
{
    var rows = oTable.$("tr");

    rows.eq(index).insertAfter(rows.eq(index + 1));
}

function MoveRowUp(tableId, index)
{           
    var rows = oTable.$("tr");

    rows.eq(index).insertBefore(rows.eq(index - 1));
}

Add data to first row using jquery DataTables

2 Answers2