Search code examples
jquerydata-bindingdatatablespagination

Improve table paging logic


I have a GridView filled with the most recent 100 documents records (Title, Description, Author, CreationDate). I use DataTable jQuery plugin to provide further features like: columns drag&drop, searching, paging.

Since the overall number of documents could be very hight (thousends of records), I decided to limit the provided data to just 100 entries. This would satisfy almost 90% of the cases.
However some users might need to search/view also older documents. Therefore I need to implement further the logic to allow loading "further" 100 records.

My process would be the following:
1) Load first 100 entries.
2) Provide extra button -> Once clicked push further 100 entries into the table (therefore 200 records).

Since i do not like really having to insert an extra button to "push" new data, how this could be achieved in a better way?


Solution

  • You can use datatables "bScrollInfinite: true" option. You would also need to specify the sScrollY option to denote the height of your datatable.

    When these options are set your user can just scroll down and when datatables detects they are getting close to the bottom of the page it will automatically load more data to the bottom for you.

    "bScrollInfinite": true,
    "sScrollY": 350,