0

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?

BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
Francesco
  • 9,947
  • 7
  • 67
  • 110
  • Why would you not want a button for this? This is standard basically all search engines ('go to next page' or something...). Or are you thinking about loading more results if the user just scrolls down on your page? – fgysin Aug 05 '11 at 11:20
  • The jQuery plugin provides already 2 buttons to navigate to next/prev page. There would be 20 to 50 records per page, then the others would be displayed in the next page (without having to scroll down and then when the last is displayed, load next 100 automatically). The idea of button seemed to me not brilliant under the design/layout perspective. But a button labelled like "load older data", might have sense even in the current layout. – Francesco Aug 05 '11 at 11:25

1 Answers1

1

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,
Keith.Abramo
  • 6,952
  • 2
  • 32
  • 46
  • Thanks for your hitn. This approach could be fine, I am only scared that if I load 1000+ records in the table, even using bScrollInfinite, it will take a while to load that page. For what I have seen there is not an Ajax call to the server to retrieve the rows as needed, but all the dataset has to be already available and displayed only when needed. Therefore this will just present a different way of paging the data. – Francesco Aug 08 '11 at 06:44
  • Jquery datatables has an option to actual do server side processing. See this link for details http://datatables.net/examples/data_sources/server_side.html – Keith.Abramo Aug 08 '11 at 12:35