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 |
|---|