annotate DataTables-1.9.4/extras/ColReorder/server_side.html @ 0:ac5f9272033b draft

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