RowReorder extension for DataTables

DataTables has an extensive API’s which can be used to access the data contained in a table and manipulate the table after the table initialisation has completed. The DataTables API is designed to reflect the structure of the data in the table and how you will typically interact with the table through the API. It can also be extended by the extensions and plug-ins providing additional features and operations.

The API can be accessed through the following methods:

  • $( selector ).DataTable();
  • $( selector ).dataTable().api();
  • new $.fn.dataTable.Api( selector );

The result from each, is an instance of the DataTables API object which has the tables found by the selector in its context. It is important to note the difference between $( selector ).DataTable() and $( selector ).dataTable(). The former returns a DataTables API instance, while the latter returns a jQuery object.

For general information of DataTables listed API which operates Data Tables tables are listed below.

  • DataTable Tables
  • RowRecorder
  • Scroller
  • DataTable Rows
  • DataTable Columns
  • Col Recorder
  • Fixed Columns
  • Fixed Header
  • Editor
  • Row Group 

In this post shown the example of RowReorder extension for DataTables being used with Editor. RowReorder provides the ability for end users to quickly and easily reorder items in the table by click and drag. The integration with Editor that it provides (rowReorder.editor) makes use of Editor’s multi-row editing abilities to update all rows to take account of the row ordered data.

This can make really for easy to use interface for end users, where they have data that they can place into a custom order.

Initialisation

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 that rows should be reorderable, although it is also possible to use an object for fine grained control (see the reference documentation for full details):

$('#myTable').DataTable( {rowReorder: true} );

Features

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

Further documentation is available at https://datatables.net/extensions/rowreorder/

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top