Basic example
Scroller is a plug-in for DataTables which enhances built-in scrolling features to allow large amounts of data to be rendered on page very quickly. This is done by Scroller through the use of a virtual rendering technique that will render only the part of the table that is actually required for the current view. Scroller assumes that all rows are of the same height (in order to preform the required calculations). Demo data in this example has 2,500 rows.
ID First name Last name ZIP / Post code Country
With Buttons extension
Scroller also supports DataTable's Buttons extension. Buttons can be initialised very easily though the buttons object which can be given as an array of the buttons that you wish to display. The B option in the dom parameter will instruct DataTables where the buttons should be placed in the document - in this case, at the top right. This example shows the copy, csv, excel, pdf and print buttons being used to display data export options for the DataTable.
ID First name Last name ZIP / Post code Country
State saving
Scroller will automatically integrate with DataTables in order to save the scrolling position of the table, if state saving is enabled in the DataTable (stateSave). This example shows that in practice - to demonstrate, scroll the table and then reload the page. When the page is reloaded, the table's state will be altered to match what they had previously set up.
ID First name Last name ZIP / Post code Country
Using API
This example shows a trivial use of the API methods that Scroller adds to the DataTables API to scroll to a row once the table's data has been loaded. In this case scroller().scrollToRow() is used to jump to row 1000. DataTables' info control element is automatically updated and shows the current visible row. Table height is configurable through scrollY string.
ID First name Last name ZIP / Post code Country
Activity
New notifications
James has completed the task Submit documents from Onboarding list
2 hours ago
Margo has added 4 users to Customer enablement channel
3 hours ago
Subscription #466573 from 10.12.2021 has been cancelled. Refund case #4492 created
4 hours ago
Older notifications
Nick requested your feedback and approval in support request #458
3 days ago
Mike added 1 new file(s) to Product management project
new_contract.pdf
112KB
1 day ago
All hands meeting will take place coming Thursday at 13:45.
2 days ago
Christine commented on your community post from 10.12.2021
2 days ago
HR department requested you to complete internal survey by Friday
3 days ago
Loading...
Demo configuration
Color mode
Direction
Layouts
Purchase Limitless