Datatables - Row Reorder

Statistics Invoices Schedule
Basic initialization
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 the first column and drag the row. Note that ordering is enabled on all columns in this example.
# Full Name Job Title DOB Status Actions
1 Marth Enright Traffic Court Referee 22 Jun 1972 Active
2 Jackelyn Weible Airline Transport Pilot 3 Oct 1981 Inactive
3 Aura Hard Business Services Sales Representative 19 Apr 1969 Suspended
4 Nathalie Pretty Drywall Stripper 13 Dec 1977 Pending
5 Sharan Leland Aviation Tactical Readiness Officer 30 Dec 1991 Inactive
6 Maxine Woldt Business Services Sales Representative 17 Oct 1987 Pending
7 Sylvia Mcgaughy Hemodialysis Technician 11 Nov 1983 Suspended
8 Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
9 Kennedy Haley Senior Marketing Designer 18 Dec 1960 Active
10 Chantal Nailor Technical Services Librarian 10 Jan 1980 Inactive
11 Delma Bonds Lead Brand Manager 21 Dec 1968 Pending
12 Roland Salmos Senior Program Developer 5 Jun 1986 Inactive
13 Coy Wollard Customer Service Operator 12 Oct 1982 Active
14 Maxwell Maben Regional Representative 25 Feb 1988 Suspended
15 Cicely Sigler Senior Research Officer 15 Mar 1960 Pending
Full row selection
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. 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. Additionally, the column that defines the row order is hidden by default, making the table a simple orderable list.
# Full Name Job Title DOB Status Actions
1 Marth Enright Traffic Court Referee 22 Jun 1972 Active
2 Jackelyn Weible Airline Transport Pilot 3 Oct 1981 Inactive
3 Aura Hard Business Services Sales Representative 19 Apr 1969 Suspended
4 Nathalie Pretty Drywall Stripper 13 Dec 1977 Pending
5 Sharan Leland Aviation Tactical Readiness Officer 30 Dec 1991 Inactive
6 Maxine Woldt Business Services Sales Representative 17 Oct 1987 Pending
7 Sylvia Mcgaughy Hemodialysis Technician 11 Nov 1983 Suspended
8 Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
9 Kennedy Haley Senior Marketing Designer 18 Dec 1960 Active
10 Chantal Nailor Technical Services Librarian 10 Jan 1980 Inactive
11 Delma Bonds Lead Brand Manager 21 Dec 1968 Pending
12 Roland Salmos Senior Program Developer 5 Jun 1986 Inactive
13 Coy Wollard Customer Service Operator 12 Oct 1982 Active
14 Maxwell Maben Regional Representative 25 Feb 1988 Suspended
15 Cicely Sigler Senior Research Officer 15 Mar 1960 Pending
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. Note that the row reordering in this example is triggered by dragging the cells in the second column.
# Full Name Job Title DOB Status Actions
1 Marth Enright Traffic Court Referee 22 Jun 1972 Active
2 Jackelyn Weible Airline Transport Pilot 3 Oct 1981 Inactive
3 Aura Hard Business Services Sales Representative 19 Apr 1969 Suspended
4 Nathalie Pretty Drywall Stripper 13 Dec 1977 Pending
5 Sharan Leland Aviation Tactical Readiness Officer 30 Dec 1991 Inactive
6 Maxine Woldt Business Services Sales Representative 17 Oct 1987 Pending
7 Sylvia Mcgaughy Hemodialysis Technician 11 Nov 1983 Suspended
8 Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
9 Kennedy Haley Senior Marketing Designer 18 Dec 1960 Active
10 Chantal Nailor Technical Services Librarian 10 Jan 1980 Inactive
11 Delma Bonds Lead Brand Manager 21 Dec 1968 Pending
12 Roland Salmos Senior Program Developer 5 Jun 1986 Inactive
13 Coy Wollard Customer Service Operator 12 Oct 1982 Active
14 Maxwell Maben Regional Representative 25 Feb 1988 Suspended
15 Cicely Sigler Senior Research Officer 15 Mar 1960 Pending
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. 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.

// Event result
# Full Name Job Title DOB Status Actions
1 Marth Enright Traffic Court Referee 22 Jun 1972 Active
2 Jackelyn Weible Airline Transport Pilot 3 Oct 1981 Inactive
3 Aura Hard Business Services Sales Representative 19 Apr 1969 Suspended
4 Nathalie Pretty Drywall Stripper 13 Dec 1977 Pending
5 Sharan Leland Aviation Tactical Readiness Officer 30 Dec 1991 Inactive
6 Maxine Woldt Business Services Sales Representative 17 Oct 1987 Pending
7 Sylvia Mcgaughy Hemodialysis Technician 11 Nov 1983 Suspended
8 Lizzee Goodlow Technical Services Librarian 1 Nov 1961 Suspended
9 Kennedy Haley Senior Marketing Designer 18 Dec 1960 Active
10 Chantal Nailor Technical Services Librarian 10 Jan 1980 Inactive
11 Delma Bonds Lead Brand Manager 21 Dec 1968 Pending
12 Roland Salmos Senior Program Developer 5 Jun 1986 Inactive
13 Coy Wollard Customer Service Operator 12 Oct 1982 Active
14 Maxwell Maben Regional Representative 25 Feb 1988 Suspended
15 Cicely Sigler Senior Research Officer 15 Mar 1960 Pending
© 2015. Limitless Web App Kit by Eugene Kopyov siddim.com