This trivial example shows the use of the rowReorder property being used to enable RowReorder on a DataTable. The first column in the table is a sequence number that provides the basis for the ordering. To change a row's order, simply click and drag the row.
Seq. | Name | Position | Office | Start date | Salary |
---|---|---|---|---|---|
1 | Shou Itou | Regional Marketing | Tokyo | 2011/08/14 | $163,000 |
2 | Tiger Nixon | System Architect | Edinburgh | 2011/04/25 | $320,800 |
3 | Bruno Nash | Software Engineer | London | 2011/05/03 | $163,500 |
4 | Olivia Liang | Support Engineer | Singapore | 2011/02/03 | $234,500 |
5 | Gavin Joyce | Developer | Edinburgh | 2010/12/22 | $92,575 |
6 | Ashton Cox | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 |
7 | Fiona Green | Chief Operating Officer (COO) | San Francisco | 2010/03/11 | $850,000 |
8 | Martena Mccray | Post-Sales support | Edinburgh | 2011/03/09 | $324,050 |
9 | Hermione Butler | Regional Director | London | 2011/03/21 | $356,250 |
10 | Finn Camacho | Support Engineer | San Francisco | 2009/07/07 | $87,500 |
Seq. | Name | Position | Office | Start date | Salary |
This example shows the same information as the simple example, but in this case restricts the column ordering that can be applied to the table to just the sequence number column. Generally this will be the configuration that RowReorder will be used in, as ordering by other columns can make the reordering potentially quite confusing for the end user.
Seq. | Name | Position | Office | Start date | Salary |
---|---|---|---|---|---|
1 | Shou Itou | Regional Marketing | Tokyo | 2011/08/14 | $163,000 |
2 | Tiger Nixon | System Architect | Edinburgh | 2011/04/25 | $320,800 |
3 | Bruno Nash | Software Engineer | London | 2011/05/03 | $163,500 |
4 | Olivia Liang | Support Engineer | Singapore | 2011/02/03 | $234,500 |
5 | Gavin Joyce | Developer | Edinburgh | 2010/12/22 | $92,575 |
6 | Ashton Cox | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 |
7 | Fiona Green | Chief Operating Officer (COO) | San Francisco | 2010/03/11 | $850,000 |
8 | Martena Mccray | Post-Sales support | Edinburgh | 2011/03/09 | $324,050 |
9 | Hermione Butler | Regional Director | London | 2011/03/21 | $356,250 |
10 | Finn Camacho | Support Engineer | San Francisco | 2009/07/07 | $87,500 |
Seq. | Name | Position | Office | Start date | Salary |
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.
Seq. | Name | Position | Office | Start date | Salary |
---|---|---|---|---|---|
1 | Shou Itou | Regional Marketing | Tokyo | 2011/08/14 | $163,000 |
2 | Tiger Nixon | System Architect | Edinburgh | 2011/04/25 | $320,800 |
3 | Bruno Nash | Software Engineer | London | 2011/05/03 | $163,500 |
4 | Olivia Liang | Support Engineer | Singapore | 2011/02/03 | $234,500 |
5 | Gavin Joyce | Developer | Edinburgh | 2010/12/22 | $92,575 |
6 | Ashton Cox | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 |
7 | Fiona Green | Chief Operating Officer (COO) | San Francisco | 2010/03/11 | $850,000 |
8 | Martena Mccray | Post-Sales support | Edinburgh | 2011/03/09 | $324,050 |
9 | Hermione Butler | Regional Director | London | 2011/03/21 | $356,250 |
10 | Finn Camacho | Support Engineer | San Francisco | 2009/07/07 | $87,500 |
Seq. | Name | Position | Office | Start date | Salary |
The rowReorder.selector option provides the ability to define which element in a table row will provide the row reordering handle to the end user. This could be a button in an Actions column (which might also provide options for editing and deleting a row), or any other element.
Name | Position | Office | Start date | Salary |
---|---|---|---|---|
Shou Itou | Regional Marketing | Tokyo | 2011/08/14 | $163,000 |
Tiger Nixon | System Architect | Edinburgh | 2011/04/25 | $320,800 |
Bruno Nash | Software Engineer | London | 2011/05/03 | $163,500 |
Olivia Liang | Support Engineer | Singapore | 2011/02/03 | $234,500 |
Gavin Joyce | Developer | Edinburgh | 2010/12/22 | $92,575 |
Ashton Cox | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 |
Fiona Green | Chief Operating Officer (COO) | San Francisco | 2010/03/11 | $850,000 |
Martena Mccray | Post-Sales support | Edinburgh | 2011/03/09 | $324,050 |
Hermione Butler | Regional Director | London | 2011/03/21 | $356,250 |
Finn Camacho | Support Engineer | San Francisco | 2009/07/07 | $87,500 |
Name | Position | Office | Start date | Salary |
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.
Seq. | Name | Position | Office | Start date | Salary |
---|---|---|---|---|---|
1 | Shou Itou | Regional Marketing | Tokyo | 2011/08/14 | $163,000 |
2 | Tiger Nixon | System Architect | Edinburgh | 2011/04/25 | $320,800 |
3 | Bruno Nash | Software Engineer | London | 2011/05/03 | $163,500 |
4 | Olivia Liang | Support Engineer | Singapore | 2011/02/03 | $234,500 |
5 | Gavin Joyce | Developer | Edinburgh | 2010/12/22 | $92,575 |
6 | Ashton Cox | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 |
7 | Fiona Green | Chief Operating Officer (COO) | San Francisco | 2010/03/11 | $850,000 |
8 | Martena Mccray | Post-Sales support | Edinburgh | 2011/03/09 | $324,050 |
9 | Hermione Butler | Regional Director | London | 2011/03/21 | $356,250 |
10 | Finn Camacho | Support Engineer | San Francisco | 2009/07/07 | $87,500 |
Seq. | Name | Position | Office | Start date | Salary |
This example is used to show RowReorder's support for DataTables scrollY feature. As the dragged row approaches the boundary of the table, the table will start to scroll.
1 | Shou Itou | Regional Marketing | Tokyo | 2011/08/14 | $163,000 |
2 | Tiger Nixon | System Architect | Edinburgh | 2011/04/25 | $320,800 |
3 | Bruno Nash | Software Engineer | London | 2011/05/03 | $163,500 |
4 | Olivia Liang | Support Engineer | Singapore | 2011/02/03 | $234,500 |
5 | Gavin Joyce | Developer | Edinburgh | 2010/12/22 | $92,575 |
6 | Ashton Cox | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 |
7 | Fiona Green | Chief Operating Officer (COO) | San Francisco | 2010/03/11 | $850,000 |
8 | Martena Mccray | Post-Sales support | Edinburgh | 2011/03/09 | $324,050 |
9 | Hermione Butler | Regional Director | London | 2011/03/21 | $356,250 |
10 | Finn Camacho | Support Engineer | San Francisco | 2009/07/07 | $87,500 |
11 | Thor Walton | Developer | New York | 2013/08/11 | $98,540 |
12 | Haley Kennedy | Senior Marketing Designer | London | 2012/12/18 | $313,500 |
13 | Jena Gaines | Office Manager | London | 2008/12/19 | $90,560 |
14 | Charde Marshall | Regional Director | San Francisco | 2008/10/16 | $470,600 |
15 | Cara Stevens | Sales Assistant | New York | 2011/12/06 | $145,600 |
16 | Michael Bruce | Javascript Developer | Singapore | 2011/06/27 | $183,000 |
17 | Jenette Caldwell | Development Lead | New York | 2011/09/03 | $345,000 |
18 | Sonya Frost | Software Engineer | Edinburgh | 2008/12/13 | $103,600 |
19 | Donna Snider | Customer Support | New York | 2011/01/25 | $112,000 |
20 | Brenden Wagner | Software Engineer | San Francisco | 2011/06/07 | $206,850 |
21 | Brielle Williamson | Integration Specialist | New York | 2012/12/02 | $372,000 |
22 | Garrett Winters | Accountant | Tokyo | 2011/07/25 | $170,750 |
23 | Quinn Flynn | Support Lead | Edinburgh | 2013/03/03 | $342,000 |
24 | Unity Butler | Marketing Designer | San Francisco | 2009/12/09 | $85,675 |
25 | Lael Greer | Systems Administrator | London | 2009/02/27 | $103,500 |
26 | Colleen Hurst | Javascript Developer | San Francisco | 2009/09/15 | $205,500 |
27 | Zorita Serrano | Software Engineer | San Francisco | 2012/06/01 | $115,000 |
28 | Timothy Mooney | Office Manager | London | 2008/12/11 | $136,200 |
29 | Caesar Vance | Pre-Sales Support | New York | 2011/12/12 | $106,450 |
30 | Vivian Harrell | Financial Controller | San Francisco | 2009/02/14 | $452,500 |
31 | Sakura Yamamoto | Support Engineer | Tokyo | 2009/08/19 | $139,575 |
32 | Paul Byrd | Chief Financial Officer (CFO) | New York | 2010/06/09 | $725,000 |
33 | Jonas Alexander | Developer | San Francisco | 2010/07/14 | $86,500 |
34 | Jackson Bradshaw | Director | New York | 2008/09/26 | $645,750 |
35 | Gloria Little | Systems Administrator | New York | 2009/04/10 | $237,500 |
36 | Angelica Ramos | Chief Executive Officer (CEO) | London | 2009/10/09 | $1,200,000 |
37 | Michael Silva | Marketing Designer | London | 2012/11/27 | $198,500 |
38 | Howard Hatfield | Office Manager | San Francisco | 2008/12/16 | $164,500 |
39 | Michelle House | Integration Specialist | Sidney | 2011/06/02 | $95,400 |
40 | Suki Burks | Developer | London | 2009/10/22 | $114,500 |
41 | Cedric Kelly | Senior Javascript Developer | Edinburgh | 2012/03/29 | $433,060 |
42 | Zenaida Frank | Software Engineer | New York | 2010/01/04 | $125,250 |
43 | Shad Decker | Regional Director | Edinburgh | 2008/11/13 | $183,000 |
44 | Serge Baldwin | Data Coordinator | Singapore | 2012/04/09 | $138,575 |
45 | Dai Rios | Personnel Lead | Edinburgh | 2012/09/26 | $217,500 |
46 | Herrod Chandler | Sales Assistant | San Francisco | 2012/08/06 | $137,500 |
47 | Prescott Bartlett | Technical Author | London | 2011/05/07 | $145,000 |
48 | Bradley Greer | Software Engineer | London | 2012/10/13 | $132,000 |
49 | Jennifer Acosta | Junior Javascript Developer | Edinburgh | 2013/02/01 | $75,650 |
50 | Rhona Davidson | Integration Specialist | Tokyo | 2010/10/14 | $327,900 |
51 | Jennifer Chang | Regional Director | Singapore | 2010/11/14 | $357,650 |
52 | Gavin Cortez | Team Leader | San Francisco | 2008/10/26 | $235,500 |
53 | Hope Fuentes | Secretary | San Francisco | 2010/02/12 | $109,850 |
54 | Tatyana Fitzpatrick | Regional Director | London | 2010/03/17 | $385,750 |
55 | Airi Satou | Accountant | Tokyo | 2008/11/28 | $162,700 |
56 | Doris Wilder | Sales Assistant | Sidney | 2010/09/20 | $85,600 |
57 | Yuri Berry | Chief Marketing Officer (CMO) | New York | 2009/06/25 | $675,000 |
By default, when a row is dragged around a page with RowReorder, it will follow the mouse for both horizontal and vertical movements. However, you may wish to restrict the movement of the following row to just the vertical axis. This can be done with the rowReorder.snapX option.
Seq. | Name | Position | Office | Start date | Salary |
---|---|---|---|---|---|
1 | Shou Itou | Regional Marketing | Tokyo | 2011/08/14 | $163,000 |
2 | Tiger Nixon | System Architect | Edinburgh | 2011/04/25 | $320,800 |
3 | Bruno Nash | Software Engineer | London | 2011/05/03 | $163,500 |
4 | Olivia Liang | Support Engineer | Singapore | 2011/02/03 | $234,500 |
5 | Gavin Joyce | Developer | Edinburgh | 2010/12/22 | $92,575 |
6 | Ashton Cox | Junior Technical Author | San Francisco | 2009/01/12 | $86,000 |
7 | Fiona Green | Chief Operating Officer (COO) | San Francisco | 2010/03/11 | $850,000 |
8 | Martena Mccray | Post-Sales support | Edinburgh | 2011/03/09 | $324,050 |
9 | Hermione Butler | Regional Director | London | 2011/03/21 | $356,250 |
10 | Finn Camacho | Support Engineer | San Francisco | 2009/07/07 | $87,500 |
Seq. | Name | Position | Office | Start date | Salary |