DataTables is often used to show sequential data, and naturally from that comes the desire to be able to reorder that data - for this the RowReorder extension is available. It provides the end user with the ability to click and drag (or touch and drag on mobile devices) a row in the table and change its position. Full integration with Editor's multi-row editing abilities is also available to have updates automatically written to a database.
RowReorder operates on a data swap method so it can operate even on non-sequential data. Consider for example a row which is dragged to the top of the table, it would take the data of the row currently in the top position, the current top row would be moved to the second, where it would take its new value from that row in the second position, etc. The data point in the row that is modified is defined by the
rowReorder.dataSrc. Normally you will want this to be a sequential number! The data reorder can potentially confuse end users otherwise!
RowReorder can be initialised on a DataTable by using the
rowReorder option in the DataTables options object - this is simply a boolean
true to indicate the the rows should be reorderable, although it is also possible to use an object for fine grained control (see the reference documentation for full details):
RowReorders presents the following features:
- Row reordering for DataTables with click and touch support
- Full integration with Editor
- Customisable drag start handle
- Drag snapping
- Full integration with Bootstrap, Foundation and the other styling libraries supported by DataTables