RowReorder

This example shows the RowReorder extension for DataTables being used with FixedColumns. The integration between these extensions has been partially supported in the past, but it is now fully supported as of version 4.0.0 of FixedColumns.

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	Sydney	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	Sydney	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
Seq.	Name	Position	Office	Start date	Salary

Javascript
HTML
CSS
Ajax
Server-side script
Comments

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

$('#example').DataTable({
	fixedColumns: true,
	paging: false,
	rowReorder: true,
	scrollCollapse: true,
	scrollX: true,
	scrollY: 300
});

new DataTable('#example', {
	fixedColumns: true,
	paging: false,
	rowReorder: true,
	scrollCollapse: true,
	scrollX: true,
	scrollY: 300
});

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:

/* Ensure that the demo table scrolls */
	th, td { white-space: nowrap; }
	div.dataTables_wrapper {
		width: 600px;
		margin: 0 auto;
	}

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.

RowReorder

Other examples

Initialisation and options

Integration with other DataTables extensions

Styling

DataTables