Dynamically add rows to datatable and update page.info()
Dynamically add rows to datatable and update page.info()
postitief
Posts: 22Questions: 9Answers: 0
I'm using datatables with server sided data. I dynamically want to add and remove rows.
If I add a row, I can use row.add(), but then I also need to call .draw() and that will redraw the whole table, meaning getting all data from the server again. But only one row is added so I don't want to burden the server with getting 100 records while only one is needed.
I don't know the existance of an api for this. So I created my own logic by adding HTML to the table with jquery:
$('#thetable').find('body tr:first').before('<tr>...</tr>');
But the page.info() is not triggered by this and the number of records it shows on the button doesn't match. How can I update these numbers without getting all records from the server againg?
This discussion has been closed.
Answers
Are you saying you have 'serverSide: true` in your Datatables options?
row.add()will add to the client side table. If you want to add this to the DB you will need to make an Ajax request with the row to add to your server script to insert into the DB. Thedraw()API is used to update the table's sorting and searching. If you have server side processing enabled then this will call the server script to provide the proper page data.Datatables won't know about this update and is not a suggested way to update Datatables.
row.add()is the way to go.You can use client side processing, especially if you have only 100 rows of data. Please see this FAQ about when to choose server side processing.
Kevin
Yes,
serverSideis set to true.Also I'm using a Ajax request to add the record to the database. Response of the Ajax request is the created record. That record must be added to the datatable.
I can do that with
row.add(). But like I said, I need to calldraw()and that will get all rows (of that page) again from the database. It will get 100 rows while the only row that is needed, is already returned from je Ajax request to add the record to the database. So callingdraw()is burning resources, also if it is only a little, it is just waist of resources and wailting time of the user.Do I need client side processing? Definitely. The table can hold thousands of records, the number 100 is just a number I was using.
My suggestion is to use
ajax.reload()to fetch the current data from the server instead of usingrow.add(). This way the client table is updated with the data from the server. Yes, its basically the same process as usingrow.add().draw().With server side processing the request and response should be small since it is expected to only return the current page of data. There is no other way if you want the table to stay updated for sorting and searching.
Kevin