Search

This example demonstrates the integration between Scroller and the Select extension for DataTables. For the most part these two extensions provide orthogonal features (i.e. they don't overlap), but the one area that they do is the table's information element. In the information element Select will show information about the items selected in the table while Scroller updates the information as the user scrolls the table. This example has both Scroller and Select enabled to demonstrate them being used together.

This example is completely artificial in that the data generated is created on the client-side by just looping around a Javascript array and then passing that to DataTables. However, it does show that DataTables and Scroller can easily cope with large amounts of data on the client-side. Typically, data such as this would be Ajax sourced and server-side processing would be implemented. Please be aware that because of the data generation, the performance of this page will depend on your browser - for example IE6 will crawl!

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 row().scrollTo() is used to jump to row index 1000.

This example shows RowReorder being used with the Responsive extension for DataTables and also that it provides support for touch inputs to perform a row reorder. Responsive is particularly useful with mobile devices, but can also be useful on desktops where complex data sets are shown in the DataTable. Note that the row reordering in this example is triggered by dragging the cells in the second column.

Providing the UI to allow end users to reorder a table is only half of the story - likely you will wish to have the changes caused by the end user to effect a database or some other data store. This can be done by listening for the row-reorder event. This examples shows how the row-reorder event can be listened for and an action taken when it is triggered. In this case we simply output data about the change to the page, but a more sophisticated use case might involve using Ajax to inform a server-side about the change. An example of Editor using RowReorder making use of Editor's multi-row editing ability, is available on the Editor web-site.

Being able to configure default values for RowReorder and enable it by default on DataTables can be quite useful. Defaults for RowReorder can be configured on the DataTable.RowReorder.defaults object or DataTable.defaults.rowReorder. This example shows both being used, with RowReorder being configured to use the whole row as a selector.

This examples shows how the row-reorder-changed event can be listened for and an action taken when it is triggered. In this case we simply output data about the change to the page, but a more sophisticated use case might involve using i.e. recalculating odd / even classes for the rows.

This example shows RowGroup being used with the Responsive extension for DataTables. Responsive allows the table to dynamically grow and shrink as the page is resized, or loaded on browsers with different sizes of display. As can be seen with this example, RowGroup and Responsive interact together exactly as would be expected, combining their respective functionality.

This example uses a simple padding-left on the first column of the table to aid with visual identification of the grouping that RowGroup provides. The effect is subtle, but it helps draw the eye to the hierarchy that is applied.

This example demonstrates the use of the rowgroup-datasrc event which is triggered whenever the grouping data source is changed (through the rowGroup().dataSrc() method). Three links are provided which will change the grouping data source, and the rowgroup-datasrc event is then used to change the table's fixed ordering (order.fixed()) to reflect that change.

It seems that init is was I was

please post your Datatables init code and versions being

other features without the init. Thanks for the info

my datatable and editor init sections: const editor = new

Yes, thank you very much! At first I was trying to apply init to "#DataTables_Table_0", but after changing the selector to "#myWrapper table", it worked.

the first statement is initializing the Datatable with default

tr').appendTo('#tableau thead'); outside the init I don't have my

true } HTML elements same: init = after destroy and create,

line 2890 you are initializing the Datable just before

use ajax, then its initialisation will be synchronous i.e. the init event would already have