|
0
|
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
|
2 <html>
|
|
|
3 <head>
|
|
|
4 <meta http-equiv="content-type" content="text/html; charset=utf-8">
|
|
|
5 <link rel="shortcut icon" type="image/ico" href="http://www.sprymedia.co.uk/media/images/favicon.ico">
|
|
|
6
|
|
|
7 <title>ColReorder example</title>
|
|
|
8 <style type="text/css" title="currentStyle">
|
|
|
9 @import "../../media/css/demo_page.css";
|
|
|
10 @import "../../media/css/demo_table.css";
|
|
|
11 @import "media/css/ColReorder.css";
|
|
|
12 </style>
|
|
|
13 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.js"></script>
|
|
|
14 <script type="text/javascript" charset="utf-8" src="../../media/js/jquery.dataTables.js"></script>
|
|
|
15 <script type="text/javascript" charset="utf-8" src="media/js/ColReorder.js"></script>
|
|
|
16 <script type="text/javascript" charset="utf-8">
|
|
|
17 $(document).ready( function () {
|
|
|
18 var oTable = $('#example').dataTable( {
|
|
|
19 "sDom": 'Rlfrtip',
|
|
|
20 "bProcessing": true,
|
|
|
21 "bServerSide": true,
|
|
|
22 "sAjaxSource": "../../examples/server_side/scripts/objects.php",
|
|
|
23 "aoColumns": [
|
|
|
24 { "mDataProp": "engine" },
|
|
|
25 { "mDataProp": "browser" },
|
|
|
26 { "mDataProp": "platform" },
|
|
|
27 { "mDataProp": "version" },
|
|
|
28 { "mDataProp": "grade" }
|
|
|
29 ]
|
|
|
30 } );
|
|
|
31 } );
|
|
|
32 </script>
|
|
|
33 </head>
|
|
|
34 <body id="dt_example">
|
|
|
35 <div id="container">
|
|
|
36 <div class="full_width big">
|
|
|
37 ColReorder example with server-side processing
|
|
|
38 </div>
|
|
|
39
|
|
|
40 <h1>Preamble</h1>
|
|
|
41 <p>Server-side processing can be exceptionally useful in DataTables when dealing with
|
|
|
42 massive data sets, and ColReorder works with this as would be expected. There must be
|
|
|
43 special consideration for the column ordering on the server-side script since the
|
|
|
44 columns can be in an unexpected order. For this you can either choose to use the
|
|
|
45 <i>sName</i> parameter for each column and take this into account in the server-side
|
|
|
46 script (the parameter 'sColumns' is a comma separated string of these sName parameters).</p>
|
|
|
47
|
|
|
48 </p>Alternatively use the more flexible <a href="http://datatables.net/usage/columns#mDataProp">mDataProp</a>
|
|
|
49 option for each column. This allows you to use JSON objects which DataTables, so order doesn't
|
|
|
50 matter like it would do in an array. Again the server-side script must take this into account
|
|
|
51 through the <i>mDataProp_{i}</i> which is sent for each column (so the server knows which
|
|
|
52 column is to be sorted on).</p>
|
|
|
53
|
|
|
54
|
|
|
55 <h1>Live example</h1>
|
|
|
56 <form>
|
|
|
57 <div id="demo">
|
|
|
58 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
|
|
59 <thead>
|
|
|
60 <tr>
|
|
|
61 <th>Rendering engine</th>
|
|
|
62 <th>Browser</th>
|
|
|
63 <th>Platform(s)</th>
|
|
|
64 <th>Engine version</th>
|
|
|
65 <th>CSS grade</th>
|
|
|
66 </tr>
|
|
|
67 </thead>
|
|
|
68 <tfoot>
|
|
|
69 <tr>
|
|
|
70 <th>Rendering engine</th>
|
|
|
71 <th>Browser</th>
|
|
|
72 <th>Platform(s)</th>
|
|
|
73 <th>Engine version</th>
|
|
|
74 <th>CSS grade</th>
|
|
|
75 </tr>
|
|
|
76 </tfoot>
|
|
|
77 <tbody>
|
|
|
78 </tbody>
|
|
|
79 </table>
|
|
|
80 </div>
|
|
|
81 </form>
|
|
|
82 <div class="spacer"></div>
|
|
|
83
|
|
|
84
|
|
|
85 <h1>Examples</h1>
|
|
|
86 <ul>
|
|
|
87 <li><a href="index.html">Basic initialisation</a></li>
|
|
|
88 <li><a href="alt_insert.html">Styling the insert cursor</a></li>
|
|
|
89 <li><a href="col_filter.html">Individual column filtering</a></li>
|
|
|
90 <li><a href="colvis.html">Integration with DataTables' ColVis plug-in</a></li>
|
|
|
91 <li><a href="fixedcolumns.html">Integration with DataTables' FixedColumns plug-in</a></li>
|
|
|
92 <li><a href="fixedheader.html">Integration with DataTables' FixedHeader plug-in</a></li>
|
|
|
93 <li><a href="predefined.html">Using a predefined column order set</a></li>
|
|
|
94 <li><a href="reset.html">Providing a user control to reset the column order</a></li>
|
|
|
95 <li><a href="scrolling.html">Column reordering shown with scrolling in DataTables</a></li>
|
|
|
96 <li><a href="server_side.html">Server-side processing support</a></li>
|
|
|
97 <li><a href="state_save.html">State saving of the column position</a></li>
|
|
|
98 <li><a href="theme.html">jQuery UI theme integration</a></li>
|
|
|
99 </ul>
|
|
|
100
|
|
|
101
|
|
|
102 <h1>Initialisation code</h1>
|
|
|
103 <pre>$(document).ready( function () {
|
|
|
104 var oTable = $('#example').dataTable( {
|
|
|
105 "sDom": 'Rlfrtip',
|
|
|
106 "bProcessing": true,
|
|
|
107 "bServerSide": true,
|
|
|
108 "sAjaxSource": "../../examples/server_side/scripts/objects.php",
|
|
|
109 "aoColumns": [
|
|
|
110 { "mDataProp": "engine" },
|
|
|
111 { "mDataProp": "browser" },
|
|
|
112 { "mDataProp": "platform" },
|
|
|
113 { "mDataProp": "version" },
|
|
|
114 { "mDataProp": "grade" }
|
|
|
115 ]
|
|
|
116 } );
|
|
|
117 } );</pre>
|
|
|
118
|
|
|
119 <h1>Example JSON return from the server</h1>
|
|
|
120 <pre>{
|
|
|
121 "sEcho": 1,
|
|
|
122 "iTotalRecords": "57",
|
|
|
123 "iTotalDisplayRecords": "57",
|
|
|
124 "aaData": [
|
|
|
125 {
|
|
|
126 "engine": "Gecko",
|
|
|
127 "browser": "Firefox 1.0",
|
|
|
128 "platform": "Win 98+ / OSX.2+",
|
|
|
129 "version": "1.7",
|
|
|
130 "grade": "A"
|
|
|
131 },
|
|
|
132 {
|
|
|
133 "engine": "Gecko",
|
|
|
134 "browser": "Firefox 1.5",
|
|
|
135 "platform": "Win 98+ / OSX.2+",
|
|
|
136 "version": "1.8",
|
|
|
137 "grade": "A"
|
|
|
138 },
|
|
|
139 ...
|
|
|
140 ]
|
|
|
141 }</pre>
|
|
|
142
|
|
|
143 <div id="footer" style="text-align:center;">
|
|
|
144 <span style="font-size:10px;">
|
|
|
145 ColReorder and DataTables © Allan Jardine 2010
|
|
|
146 </span>
|
|
|
147 </div>
|
|
|
148 </div>
|
|
|
149 </body>
|
|
|
150 </html> |
