rowsTotal reduced below displayed page's last row between pagination requests

rowsTotal reduced below displayed page's last row between pagination requests

sebastianbarthsebastianbarth Posts: 50Questions: 11Answers: 0
edited June 13 in Free community support

We use server-side processing, getting the data (including total number of rows) from the backend using the ajax feature.
We use button-based pagination in one and scroller for endless scrolling in the other situation.

Caused by an action by the user on the frontend, the backend may alter, even reduce or extent the result row set. The same user action then will cause a call of dataTable.draw('page'); leading to a fetch of the new data from the backend at the current page by datatable. The received data is passed to datatables while also passing a new (reduced/extented) recordsTotal value along it. recordsFiltered is always equal to recordsTotal because the difference is always unknown.

When extending the total row count, causing even more pages to appear at the end of the table, datatables stays at the current page and even perfectly maintains its scroll position. In the reduction use-case the table does weird things and seems broken.

Let's imagine the following situation of a result set reduction: Say we are on page 10 of 10, with 100 rows per page, showing row #901 to #1000 (so recordsTotal is 1000). Then the user action causes a reduction of the result row set and triggers the data update of datatables. The total number of rows is now reduced to 500, so recordsTotal received from the backend is also passed as 500 to datatable's calllback(data) in the ajax function, along with an empty set of rows, because the requested rage of page 10 does not exist any longer.

In the scroller scenario, when being at getting a reduced result row set the following happens:
* Datatable scroller reduces the total height of the scroll area according to the new, reduced recordsTotal
* A scroll event is triggered because the old scroll position cannot be maintained
* The scroll event triggers a data request of the new position
* Eventually, the table renders but with no rows displayed

In the pagination scenario this is different:
* Datatable reduces the page count
* Eventually, the table renders but with no rows displayed
* document.querySelector('.d-table').getDataTable().page() still shows 10
* No page button is selected

What would be the correct way to implement the behavior, that datatable displays the last possible range?
In the example above this would be:
* Scroller: Scroll to end of the table, rendering rows #500
* Pagination: Show page 5, rendering rows #401 to #500

Sign In or Register to comment.