Dynamically add rows to datatable and update page.info()

Dynamically add rows to datatable and update page.info()

postitiefpostitief 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?

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    I'm using datatables with server sided data.

    Are you saying you have 'serverSide: true` in your Datatables options?

    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.

    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. The draw() 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.

    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:

    Datatables won't know about this update and is not a suggested way to update Datatables. row.add() is the way to go.

    How can I update these numbers without getting all records from the server againg?

    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

  • postitiefpostitief Posts: 22Questions: 9Answers: 0
    edited April 2020

    Yes, serverSide is 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 call draw() 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 calling draw() 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.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    My suggestion is to use ajax.reload() to fetch the current data from the server instead of using row.add(). This way the client table is updated with the data from the server. Yes, its basically the same process as using row.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

This discussion has been closed.