Question

I am trying to make a page with a table enhanced with the DataTables plugin, where a user can add new rows via a separate form.

Using the API, this was relatively simple to do:


$('#table').dataTable().fnAddData( [
data.content.notes,
data.content.date,
data.content.name,
amount.toFixed(2),
deleteButton
]);


However, if the table is sorted and pagination is enabled, then the inserted row might end up in a page other than the currently selected one. Which is a bit of a pain, because even with a proper success message near the ‘add’ button, I still think that the users will get confused.

So my solution to this is: add a new row, then change the current page to the page where the row has been inserted, then briefly highlight the row.

Any ideas on how to find out on what page the row has been inserted? 🙂

Thanks,
Alex

Answer 1

Why don’t you try the fnAddDataAndDisplay() plugin on the plugin API page?

Add a new row to the table and display it on the screen by jumping the pagination to the required location. This function also returns an object with the added TR element and it’s index in aoData such that you could provide an effect (fade for example) to show which row has been added.

\Edit – somebody else asked exactly the same question on their forums

~Cyrix