Pagination Fails When adding new rows in DataTable
Pagination Fails When adding new rows in DataTable
naddy19
Posts: 8Questions: 0Answers: 0
My dataTable is initialized with server side option enabled. Whenever the request is fired to the server , i am returning only the number of rows which are needed to be displayed on the current page.
Now what i need is to add new rows to the dataTable. The row which is added is to be the last row on the last page of the dataTable.
For achieving this , what i have done is :
1. I changed the page to last page by calling the fnPageChange method this way: [code]oTable.fnPageChange('last');[/code]
2. When the page is changed, a new ajax request is fired and on completion of this request 'xhr' event is fired, so i have handled this 'xhr' event and in this event handling function i have added the new row this way: [code]oTable.on('xhr', function() {
oTable.fnSettings().bAjaxDataGet = false; //disabled the ajax request firing logic so that the new row gets displayed on the page
oTable.fnAddData(newRowData); // Where newRowData is the data which i want to display on the new row
});[/code]
This code works fine if the number of rows which are already present in the datatable is less than the max rows to be displayed on the current page and we are adding a new row , but if the number of rows present on the last page is equal to the max rows which are to be shown on a page and if we add new row then ideally a new page should be added displaying only the newly added row, but instead it is showing the newly added row on the current page itself as an extra row.
e.g If we have set that only 10 rows should be displayed on any page, and if the last page has 10 rows displayed and now if you add a new row then ideally the newly added row should be displayed on the next page as the only row on page but actaully it is showing the newly added row as the 11th row on the last page itself
Someone please help me getting the newly added rows to the next page.
Now what i need is to add new rows to the dataTable. The row which is added is to be the last row on the last page of the dataTable.
For achieving this , what i have done is :
1. I changed the page to last page by calling the fnPageChange method this way: [code]oTable.fnPageChange('last');[/code]
2. When the page is changed, a new ajax request is fired and on completion of this request 'xhr' event is fired, so i have handled this 'xhr' event and in this event handling function i have added the new row this way: [code]oTable.on('xhr', function() {
oTable.fnSettings().bAjaxDataGet = false; //disabled the ajax request firing logic so that the new row gets displayed on the page
oTable.fnAddData(newRowData); // Where newRowData is the data which i want to display on the new row
});[/code]
This code works fine if the number of rows which are already present in the datatable is less than the max rows to be displayed on the current page and we are adding a new row , but if the number of rows present on the last page is equal to the max rows which are to be shown on a page and if we add new row then ideally a new page should be added displaying only the newly added row, but instead it is showing the newly added row on the current page itself as an extra row.
e.g If we have set that only 10 rows should be displayed on any page, and if the last page has 10 rows displayed and now if you add a new row then ideally the newly added row should be displayed on the next page as the only row on page but actaully it is showing the newly added row as the 11th row on the last page itself
Someone please help me getting the newly added rows to the next page.
This discussion has been closed.
Replies
and
> fnAddData
The fnAddData documentation specifically says:
> if you are using server-side processing (i.e. "bServerSide": true), then to add data, you must add it to the data source, i.e. the server-side, through an Ajax call.
In server-side processing mode, DataTables is just a display and event handler - not a data store. Client-side manipulation of data will have no effect.
Allan
actually i am using the fnAddData method just for UI representation , the actual addition of the row is done by saving the row.
I need to give an interface to the user to add new rows client side , so i have used fnAddData to add a new row client side and made that row editable and have given a save button to save the newly entered data.
All the use cases are working fine, only the case of adding the row when the number of rows on the last page is equal to the max allowed row on a page and the user adds a new row is failing.
I need the newly added row in this case to be shown on the next page.
When you change page, sort data, filter, call fnAddData etc, these all result in a redraw of the table. And since there is no data at the client-side DataTables makes a request to the server to get the data it should draw.
So what is happening is you use fnAddData to add a row on the client-side, DataTables makes a request to the server, and redraws the table with what it gets back from the server, eliminating any client-side changes.
The basic idea is that fnAddData is not suitable for use with bServerSide (nor is fnDeleteRow or fnUpdate).
Allan