Datta Able
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Generic placeholder image
3
Josephin DoeTyping . .
Generic placeholder image
1
Lary Doeonline
Generic placeholder image
Aliceonline
Generic placeholder image
1
Alia10 min ago
Generic placeholder image
Suzen15 min ago
Josephin Doe
Generic placeholder image

hello Datta! Will you tell me something

about yourself?

8:20 a.m.

Ohh! very nice

8:22 a.m.

Generic placeholder image

can you help me?

8:20 a.m.

Rows Reorder
Basic Row Reorder
Note that sorting is enabled on all columns in this example - you may wish to restrict sorting to just the sequence column to help prevent potential user confusion if they reorder when the table ordering is performed on a different column.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Full Row Selection
By default only the first cell in the row will trigger the reordering action. This example shows the entire row being able to start the reorder. Simply click and drag anywhere on the row
PositionOfficeAgeStart dateSalary
Accountant Tokyo 33 2008/11/28 $162,700
Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Junior Technical Author San Francisco 66 2009/01/12 $86,000
Software Engineer London 41 2012/10/13 $132,000
Software Engineer San Francisco 28 2011/06/07 $206,850
Integration Specialist New York 61 2012/12/02 $372,000
Pre-Sales Support New York 21 2011/12/12 $106,450
Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Regional Director San Francisco 36 2008/10/16 $470,600
Javascript Developer San Francisco 39 2009/09/15 $205,500
PositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Responsive Integration
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.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
Reorder Events
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.
NamePositionOfficeAgeStart dateSalary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Charde Marshall Regional Director San Francisco 36 2008/10/16 $470,600
Colleen Hurst Javascript Developer San Francisco 39 2009/09/15 $205,500
NamePositionOfficeAgeStart dateSalary
Showing 1 to 10 of 30 entries
// [ Basic Row Reorder ] var basicrow = $('#basic-row-reorder').DataTable({ rowReorder: true }); // [ Full Row Selection ] var fullrow = $('#full-row-reorder').DataTable({ rowReorder: { selector: 'tr' }, columnDefs: [{ targets: 0, visible: false }] }); // [ Responsive Integration ] var resrow = $('#responsive-reorder').DataTable({ rowReorder: { selector: 'td:nth-child(2)' }, responsive: true }); // [ Reorder Events ] var rowevents = $('#reorder-events').DataTable({ rowReorder: true }); rowevents.on('row-reorder', function(e, diff, edit) { var result = 'Reorder started on row: ' + edit.triggerRow.data()[1] + '
'; for (var i = 0, ien = diff.length; i < ien; i++) { var rowData = rowevents.row(diff[i].node).data(); result += rowData[1] + ' updated to be in position ' + diff[i].newData + ' (was ' + diff[i].oldData + ')
'; } $('#result').html('Event result:
' + result); });