Load more button / alternative pagination
Load more button / alternative pagination
rtsage
Posts: 2Questions: 0Answers: 0
Hello,
We are using DataTables sourcing server-side JSON, displaying preset number of rows. For example we display 10 rows out of 33 available on server. DataTables pagination shows 4 available pages (10, 10, 10 and 3 rows). We are trying to implement a "Load more" button that works as follows: when the user clicks on "Load more" on first page, DT should load next set of data (11-20), add it to the existing dataset and render new rows accordingly.
We were able to achieve the desired effect, however, when we load another 10 entries, DT assumes that the number of rows per page has been changed (to 20), and it applies this change to all pages. So after the first "load more" click the number of pages changes to 2 (20, 13 rows).
Is there a possible workaround to retain the primary number of pages (4) ?
Replies
Hi @rtsage ,
The page size should be retained, unless specifically changed. It would be worth looked at the server-side examples, such as this one here.
If that doesn't help, could you provide a test case so we can see what's going on.
Cheers,
Colin
See jQuery DataTables: “Load more” button. However that functionality is achieved by changing page length as well and hiding pagination and informational controls.
See more articles about jQuery DataTables on gyrocode.com.
Hello colin, gyrocode! Thank you guys for a prompt response.
Gyrocode:
Unfortunately we can't use the provided "load more" link because we need to retain the pagination
Colin:
Ok, let me try to explain what functionality we are looking for based on your example. Your have 10 rows, and 6 pages. Imagine, please, that beside pagination we have a "load more" button. When you click on the button, the rows list should be expanded by another 10 rows (11-20), and now show 20 rows. At the same time, total page count (6) should be retained, and 2nd page selected in pagination.
If you click "load more" again, the list should now display 30 rows (1-30) and page 3 selected in pagination.
Now, if you directly click page 4 in pagination, the list should return to 10 rows, and display rows 40-49 as it acts now.
It doesn't matter if the data is being fetched from server, or it is provided locally in JSON, we are trying to understand if we could find a solution using standard DT functionality.
Thanks again for your time and help.
Hi @rtsage ,
Yep, understood, but I don't think that's possible. @gyrocode's nifty plugin hides the paging, since it would interfere with DataTable's model of the data, but what you're asking for (paging but with variable length pages) will undermine that paging model.
Hope that helps,
Cheers,
Colin