Free cookie consent management tool by TermsFeed Policy Generator

source: branches/WebApplication/MVC2/HeuristicLabWeb.PluginHost/HLWebPluginHost/Content/jQuery/jQueryPlugins/DataTables-1.7.6/examples/server_side/column_ordering.html @ 6286

Last change on this file since 6286 was 6286, checked in by dkahn, 13 years ago

#1198 Added jQuery plus plugins
File size: 8.6 KB
Line 
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.datatables.net/media/images/favicon.ico" />
6   
7    <title>DataTables example</title>
8    <style type="text/css" title="currentStyle">
9      @import "../../media/css/demo_page.css";
10      @import "../../media/css/demo_table.css";
11    </style>
12    <script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
13    <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
14    <script type="text/javascript" charset="utf-8">
15      $(document).ready(function() {
16        $('#example').dataTable( {
17          "bProcessing": true,
18          "bServerSide": true,
19          "sAjaxSource": "../examples_support/server_processing_ordering.php",
20          "aoColumns": [
21            { "sName": "engine" },
22            { "sName": "browser" },
23            { "sName": "platform" },
24            { "sName": "version" },
25            { "sName": "grade" }
26          ]
27        } );
28      } );
29    </script>
30  </head>
31  <body id="dt_example">
32    <div id="container">
33      <div class="full_width big">
34        <i>DataTables</i> server-side column ordering example
35      </div>
36     
37      <h1>Preamble</h1>
38      <p>When using server-side processing it may be considerably easier on the server-side to output the data in an order which is not exactly that shown by the table to the end user. For this reason you can 'name' each column and this information will be sent to the server (comma delimited) as the variable 'sColumns' - this is the column information that DataTables expects to get back from a request.</p>
39      <p>Equally there you can defined an 'sColumns' in the JSON return which tells DataTables the order of the columns that has been returned. If the order is different from what it expects, then it will automatically re-order for you. The following example shows a server-side return which gives the columns "out of order".</p>
40     
41      <h1>Live example</h1>
42      <div id="dynamic">
43<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
44  <thead>
45    <tr>
46      <th width="20%">Rendering engine</th>
47      <th width="25%">Browser</th>
48      <th width="25%">Platform(s)</th>
49      <th width="15%">Engine version</th>
50      <th width="15%">CSS grade</th>
51    </tr>
52  </thead>
53  <tbody>
54    <tr>
55      <td colspan="5" class="dataTables_empty">Loading data from server</td>
56    </tr>
57  </tbody>
58  <tfoot>
59    <tr>
60      <th>Rendering engine</th>
61      <th>Browser</th>
62      <th>Platform(s)</th>
63      <th>Engine version</th>
64      <th>CSS grade</th>
65    </tr>
66  </tfoot>
67</table>
68      </div>
69      <div class="spacer"></div>
70     
71     
72      <h1>Initialisation code</h1>
73      <pre>$(document).ready(function() {
74  $('#example').dataTable( {
75    "bProcessing": true,
76    "bServerSide": true,
77    "sAjaxSource": "../examples_support/server_processing_ordering.php",
78    "aoColumns": [
79      { "sName": "engine" },
80      { "sName": "browser" },
81      { "sName": "platform" },
82      { "sName": "version" },
83      { "sName": "grade" }
84    ]
85  } );
86} );</pre>
87     
88     
89      <h1>Other examples</h1>
90      <h2>Basic initialisation</h2>
91      <ul>
92        <li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
93        <li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
94        <li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
95        <li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
96        <li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
97        <li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
98        <li><a href="../basic_init/dom.html">DOM positioning</a></li>
99        <li><a href="../basic_init/state_save.html">State saving</a></li>
100        <li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
101        <li>Scrolling:
102          <a href="../basic_init/scroll_x.html">Horizontal</a> /
103          <a href="../basic_init/scroll_y.html">Vertical</a> /
104          <a href="../basic_init/scroll_xy.html">Both</a> /
105          <a href="../basic_init/scroll_y_theme.html">Themed</a> /
106          <a href="../basic_init/scroll_y_infinite.html">Infinite</a>
107        </li>
108        <li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
109        <li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
110      </ul>
111     
112      <h2>Advanced initialisation</h2>
113      <ul>
114        <li><a href="../advanced_init/events_pre_init.html">Events (pre initialisation)</a></li>
115        <li><a href="../advanced_init/events_post_init.html">Events (post initialisation)</a></li>
116        <li><a href="../advanced_init/column_render.html">Column rendering</a></li>
117        <li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
118        <li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
119        <li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
120        <li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
121        <li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
122        <li><a href="../advanced_init/complex_header.html">Column grouping through col/row spans</a></li>
123        <li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
124        <li><a href="../advanced_init/row_callback.html">Row callback</a></li>
125        <li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
126        <li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
127      </ul>
128     
129      <h2>Data sources</h2>
130      <ul>
131        <li><a href="../data_sources/dom.html">DOM</a></li>
132        <li><a href="../data_sources/js_array.html">Javascript array</a></li>
133        <li><a href="../data_sources/ajax.html">Ajax source</a></li>
134        <li><a href="../data_sources/server_side.html">Server side processing</a></li>
135      </ul>
136     
137      <h2>Server-side processing</h2>
138      <ul>
139        <li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
140        <li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
141        <li><a href="../server_side/post.html">Use HTTP POST</a></li>
142        <li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
143        <li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
144        <li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
145        <li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
146      </ul>
147     
148      <h2>API</h2>
149      <ul>
150        <li><a href="../api/add_row.html">Dynamically add a new row</a></li>
151        <li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
152        <li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
153        <li><a href="../api/highlight.html">Highlight rows and columns</a></li>
154        <li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
155        <li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
156        <li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
157        <li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
158        <li><a href="../api/form.html">Submit form with elements in table</a></li>
159        <li><a href="../api/counter_column.html">Index column (static number column)</a></li>
160        <li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
161        <li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
162        <li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
163        <li><a href="../api/regex.html">Regular expression filtering</a></li>
164      </ul>
165     
166      <h2>Plug-ins</h2>
167      <ul>
168        <li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
169        <li><a href="../plug-ins/sorting_plugin.html">Sorting and type detection</a></li>
170        <li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
171        <li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
172        <li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
173        <li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
174      </ul>
175     
176     
177      <p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
178     
179     
180      <div id="footer" style="text-align:center;">
181        <span style="font-size:10px;">DataTables &copy; Allan Jardine 2008-2010</span>
182      </div>
183    </div>
184  </body>
185</html>
Note: See TracBrowser for help on using the repository browser.