RowReorder example Reorder event

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.

Event result:
Seq. Name Position Office Start date Salary
Seq. Name Position Office Start date Salary
2 Tiger Nixon System Architect Edinburgh 2011/04/25 $320,800
22 Garrett Winters Accountant Tokyo 2011/07/25 $170,750
6 Ashton Cox Junior Technical Author San Francisco 2009/01/12 $86,000
41 Cedric Kelly Senior Javascript Developer Edinburgh 2012/03/29 $433,060
55 Airi Satou Accountant Tokyo 2008/11/28 $162,700
21 Brielle Williamson Integration Specialist New York 2012/12/02 $372,000
46 Herrod Chandler Sales Assistant San Francisco 2012/08/06 $137,500
50 Rhona Davidson Integration Specialist Tokyo 2010/10/14 $327,900
26 Colleen Hurst Javascript Developer San Francisco 2009/09/15 $205,500
18 Sonya Frost Software Engineer Edinburgh 2008/12/13 $103,600
13 Jena Gaines Office Manager London 2008/12/19 $90,560
23 Quinn Flynn Support Lead Edinburgh 2013/03/03 $342,000
14 Charde Marshall Regional Director San Francisco 2008/10/16 $470,600
12 Haley Kennedy Senior Marketing Designer London 2012/12/18 $313,500
54 Tatyana Fitzpatrick Regional Director London 2010/03/17 $385,750
37 Michael Silva Marketing Designer London 2012/11/27 $198,500
32 Paul Byrd Chief Financial Officer (CFO) New York 2010/06/09 $725,000
35 Gloria Little Systems Administrator New York 2009/04/10 $237,500
48 Bradley Greer Software Engineer London 2012/10/13 $132,000
45 Dai Rios Personnel Lead Edinburgh 2012/09/26 $217,500
17 Jenette Caldwell Development Lead New York 2011/09/03 $345,000
57 Yuri Berry Chief Marketing Officer (CMO) New York 2009/06/25 $675,000
29 Caesar Vance Pre-Sales Support New York 2011/12/12 $106,450
56 Doris Wilder Sales Assistant Sidney 2010/09/20 $85,600
36 Angelica Ramos Chief Executive Officer (CEO) London 2009/10/09 $1,200,000
5 Gavin Joyce Developer Edinburgh 2010/12/22 $92,575
51 Jennifer Chang Regional Director Singapore 2010/11/14 $357,650
20 Brenden Wagner Software Engineer San Francisco 2011/06/07 $206,850
7 Fiona Green Chief Operating Officer (COO) San Francisco 2010/03/11 $850,000
1 Shou Itou Regional Marketing Tokyo 2011/08/14 $163,000
39 Michelle House Integration Specialist Sidney 2011/06/02 $95,400
40 Suki Burks Developer London 2009/10/22 $114,500
47 Prescott Bartlett Technical Author London 2011/05/07 $145,000
52 Gavin Cortez Team Leader San Francisco 2008/10/26 $235,500
8 Martena Mccray Post-Sales support Edinburgh 2011/03/09 $324,050
24 Unity Butler Marketing Designer San Francisco 2009/12/09 $85,675
38 Howard Hatfield Office Manager San Francisco 2008/12/16 $164,500
53 Hope Fuentes Secretary San Francisco 2010/02/12 $109,850
30 Vivian Harrell Financial Controller San Francisco 2009/02/14 $452,500
28 Timothy Mooney Office Manager London 2008/12/11 $136,200
34 Jackson Bradshaw Director New York 2008/09/26 $645,750
4 Olivia Liang Support Engineer Singapore 2011/02/03 $234,500
3 Bruno Nash Software Engineer London 2011/05/03 $163,500
31 Sakura Yamamoto Support Engineer Tokyo 2009/08/19 $139,575
11 Thor Walton Developer New York 2013/08/11 $98,540
10 Finn Camacho Support Engineer San Francisco 2009/07/07 $87,500
44 Serge Baldwin Data Coordinator Singapore 2012/04/09 $138,575
42 Zenaida Frank Software Engineer New York 2010/01/04 $125,250
27 Zorita Serrano Software Engineer San Francisco 2012/06/01 $115,000
49 Jennifer Acosta Junior Javascript Developer Edinburgh 2013/02/01 $75,650
15 Cara Stevens Sales Assistant New York 2011/12/06 $145,600
9 Hermione Butler Regional Director London 2011/03/21 $356,250
25 Lael Greer Systems Administrator London 2009/02/27 $103,500
33 Jonas Alexander Developer San Francisco 2010/07/14 $86,500
43 Shad Decker Regional Director Edinburgh 2008/11/13 $183,000
16 Michael Bruce Javascript Developer Singapore 2011/06/27 $183,000
19 Donna Snider Customer Support New York 2011/01/25 $112,000

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { var table = $('#example').DataTable( { rowReorder: true } ); table.on( 'row-reorder', function ( e, diff, edit ) { var result = 'Reorder started on row: '+edit.triggerRow.data()[1]+'<br>'; for ( var i=0, ien=diff.length ; i<ien ; i++ ) { var rowData = table.row( diff[i].node ).data(); result += rowData[1]+' updated to be in position '+ diff[i].newData+' (was '+diff[i].oldData+')<br>'; } $('#result').html( 'Event result:<br>'+result ); } ); } );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

#result { border: 1px solid #888; background: #f7f7f7; padding: 1em; margin-bottom: 1em; }

The following CSS library files are loaded for use in this example to provide the styling of the table:

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side processing scripts can be written in any language, using the protocol described in the DataTables documentation.