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