RowReorder example - Reorder event

# 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

- Javascript
- HTML
- CSS
- Ajax
- Server-side script

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:

- //code.jquery.com/jquery-1.12.3.js
- ../../../../media/js/jquery.dataTables.js
- ../../js/dataTables.rowReorder.js

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:

- ../../../../media/css/jquery.dataTables.css
- ../../css/rowReorder.dataTables.css

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.