5 <link rel=
"shortcut icon" type=
"image/ico" href=
"http://www.datatables.net/favicon.ico">
6 <meta name=
"viewport" content=
"initial-scale=1.0, maximum-scale=2.0">
8 <title>ColReorder example - Server-side processing
</title>
9 <link rel=
"stylesheet" type=
"text/css" href=
"../../../media/css/jquery.dataTables.css">
10 <link rel=
"stylesheet" type=
"text/css" href=
"../css/dataTables.colReorder.css">
11 <link rel=
"stylesheet" type=
"text/css" href=
"../../../examples/resources/syntax/shCore.css">
12 <link rel=
"stylesheet" type=
"text/css" href=
"../../../examples/resources/demo.css">
13 <style type=
"text/css" class=
"init">
16 <script type=
"text/javascript" language=
"javascript" src=
"../../../media/js/jquery.js"></script>
17 <script type=
"text/javascript" language=
"javascript" src=
"../../../media/js/jquery.dataTables.js"></script>
18 <script type=
"text/javascript" language=
"javascript" src=
"../js/dataTables.colReorder.js"></script>
19 <script type=
"text/javascript" language=
"javascript" src=
"../../../examples/resources/syntax/shCore.js"></script>
20 <script type=
"text/javascript" language=
"javascript" src=
"../../../examples/resources/demo.js"></script>
21 <script type=
"text/javascript" language=
"javascript" class=
"init">
25 $(document).ready(function() {
26 $('#example').dataTable( {
30 ajax:
"../../../examples/server_side/scripts/objects.php",
32 { data:
"first_name" },
33 { data:
"last_name" },
36 { data:
"start_date" },
47 <body class=
"dt-example">
48 <div class=
"container">
50 <h1>ColReorder example
<span>Server-side processing
</span></h1>
53 <p>Server-side processing can be exceptionally useful in DataTables when dealing with massive data sets, and ColReorder works with this as would be expected.
</p>
55 <p>It is recommend that you use object based data with server-side processing and ColReorder, as this provides easily understandable mapping between the the
56 columns and the data relation on the server, otherwise you need to work out array indexes on each call!
</p>
59 <table id=
"example" class=
"display" cellspacing=
"0" width=
"100%">
84 <li class=
"active">Javascript
</li>
88 <li>Server-side script
</li>
93 <p>The Javascript shown below is used to initialise the table shown in this example:
</p><code class=
"multiline language-js">$(document).ready(function() {
94 $('#example').dataTable( {
98 ajax:
"../../../examples/server_side/scripts/objects.php
",
100 { data:
"first_name
" },
101 { data:
"last_name
" },
102 { data:
"position
" },
103 { data:
"office
" },
104 { data:
"start_date
" },
105 { data:
"salary
" }
110 <p>In addition to the above code, the following Javascript library files are loaded for use in this example:
</p>
113 <li><a href=
"../../../media/js/jquery.js">../../../media/js/jquery.js
</a></li>
114 <li><a href=
"../../../media/js/jquery.dataTables.js">../../../media/js/jquery.dataTables.js
</a></li>
115 <li><a href=
"../js/dataTables.colReorder.js">../js/dataTables.colReorder.js
</a></li>
120 <p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:
</p>
125 <p>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
126 additional CSS used is shown below:
</p><code class=
"multiline language-css"></code>
129 <p>The following CSS library files are loaded for use in this example to provide the styling of the table:
</p>
132 <li><a href=
"../../../media/css/jquery.dataTables.css">../../../media/css/jquery.dataTables.css
</a></li>
133 <li><a href=
"../css/dataTables.colReorder.css">../css/dataTables.colReorder.css
</a></li>
138 <p>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
143 <p>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
144 processing scripts can be written in any language, using
<a href=
"//datatables.net/manual/server-side">the protocol described in the DataTables
145 documentation
</a>.
</p>
153 <div class=
"gradient"></div>
156 <h2>Other examples
</h2>
159 <div class=
"toc-group">
160 <h3><a href=
"./index.html">Examples
</a></h3>
161 <ul class=
"toc active">
162 <li><a href=
"./simple.html">Basic initialisation
</a></li>
163 <li><a href=
"./new_init.html">Initialisation using `new`
</a></li>
164 <li><a href=
"./alt_insert.html">Alternative insert styling
</a></li>
165 <li><a href=
"./realtime.html">Realtime updating
</a></li>
166 <li><a href=
"./state_save.html">State saving
</a></li>
167 <li><a href=
"./scrolling.html">Scrolling table
</a></li>
168 <li><a href=
"./predefined.html">Predefined column ordering
</a></li>
169 <li><a href=
"./reset.html">Reset ordering API
</a></li>
170 <li><a href=
"./colvis.html">ColVis integration
</a></li>
171 <li><a href=
"./fixedcolumns.html">FixedColumns integration
</a></li>
172 <li><a href=
"./fixedheader.html">FixedHeader integration
</a></li>
173 <li><a href=
"./jqueryui.html">jQuery UI styling
</a></li>
174 <li><a href=
"./col_filter.html">Individual column filtering
</a></li>
175 <li class=
"active"><a href=
"./server_side.html">Server-side processing
</a></li>
180 <div class=
"epilogue">
181 <p>Please refer to the
<a href=
"http://www.datatables.net">DataTables documentation
</a> for full information about its API properties and methods.
<br>
182 Additionally, there are a wide range of
<a href=
"http://www.datatables.net/extras">extras
</a> and
<a href=
"http://www.datatables.net/plug-ins">plug-ins
</a>
183 which extend the capabilities of DataTables.
</p>
185 <p class=
"copyright">DataTables designed and created by
<a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd
</a> © 2007-
2015<br>
186 DataTables is licensed under the
<a href=
"http://www.datatables.net/mit">MIT license
</a>.
</p>