Correct way to append data into existing data table using ajax Correct way to append data into existing data table using ajax ajax ajax

Correct way to append data into existing data table using ajax


"I think i have to pass it to datatable, yes?". Yes. The correct way is to go through the API. Without using the API, dataTables cannot be aware of whatever changes you have made to the underlying <table> and therefore your recent records disappear :

var table; //outside your function scopes

in searchDonors() :

table = $('#demoApi').DataTable();

in loadNext() use row.add() instead of injecting markup to <tbody> :

for (var i = 1; i < countsNew; i++) {   table.row.add([oNameMore[i].innerHTML, oAddressMore[i].innerHTML]);}table.draw();


yes ofc modify DOM its not enought for datatables, you need to use datatables function to access data, use this:

initialize the table:

var myTable = $('#demoApi').DataTable();

then

myTable.row.add( [oNameMore[i].innerHTML,oAddressMore[i].innerHTML] );

all the data are stored inside datables settings object, updating the DOM don't change the current table settings so you will lose you change after any table redraw ( search, change page, ecc.. )