Free cookie consent management tool by TermsFeed Policy Generator

source: branches/WebApplication/MVC2/HeuristicLabWeb.PluginHost/HLWebPluginHost/Content/jQuery/jQueryPlugins/DataTables-1.7.6/examples/basic_init/multi_col_sort.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: 18.2 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      /* Define two custom functions (asc and desc) for string sorting */
16      jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
17        return ((x < y) ? -1 : ((x > y) ?  1 : 0));
18      };
19     
20      jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
21        return ((x < y) ?  1 : ((x > y) ? -1 : 0));
22      };
23     
24      $(document).ready(function() {
25        /* Build the DataTable with third column using our custom sort functions */
26        $('#example').dataTable( {
27          "aaSorting": [ [0,'asc'], [1,'asc'] ],
28          "aoColumnDefs": [
29            { "sType": 'string-case', "aTargets": [ 2 ] }
30          ]
31        } );
32      } );
33    </script>
34  </head>
35  <body id="dt_example">
36    <div id="container">
37      <div class="full_width big">
38        <i>DataTables</i> multi column and custom sort example
39      </div>
40
41      <h1>Preamble</h1>
42      <p>As you would expect with a desktop application, <i>DataTables</i> allows you to sort by multiple columns at the same time. This multiple sorting mechanism is always active if the <b>bSort</b> initialiser is <b>true</b> (it is by default) and the end user can activate it by 'shift' clicking on the column they want to add to the sort. You can also pass in an array of information using the <b>aaSorting</b> initialiser, as I have done in the example below there the first column is sorted as the primary column and the second one then used if the elements in the first column match. As many columns as you wish can be added to the sort.</p>
43      <p><i>DataTables</i> also provides a method to add your own sorting functions, to extend those built into DataTables. This can be very useful if you wish to sort on data formats such as currency and non-Javascript standard date formats (<a href="http://www.overset.com/2008/09/01/javascript-natural-sort-algorithm/">this natural sort</a> algorithm is a popular useage). This is achieved by extending the <b>jQuery.fn.dataTableExt</b> object with ascending and descending sort functions. In the example below I've added case sensitive sorting functions.</p>
44     
45      <h1>Live example</h1>
46      <div id="demo">
47<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
48  <thead>
49    <tr>
50      <th>Rendering engine</th>
51      <th>Browser</th>
52      <th>Platform(s)</th>
53      <th>Engine version</th>
54      <th>CSS grade</th>
55    </tr>
56  </thead>
57  <tbody>
58    <tr class="gradeX">
59      <td>Trident</td>
60      <td>Internet
61         Explorer 4.0</td>
62      <td>Win 95+</td>
63      <td class="center">4</td>
64      <td class="center">X</td>
65    </tr>
66    <tr class="gradeC">
67      <td>Trident</td>
68      <td>Internet
69         Explorer 5.0</td>
70      <td>Win 95+</td>
71      <td class="center">5</td>
72      <td class="center">C</td>
73    </tr>
74    <tr class="gradeA">
75      <td>Trident</td>
76      <td>Internet
77         Explorer 5.5</td>
78      <td>Win 95+</td>
79      <td class="center">5.5</td>
80      <td class="center">A</td>
81    </tr>
82    <tr class="gradeA">
83      <td>Trident</td>
84      <td>Internet
85         Explorer 6</td>
86      <td>Win 98+</td>
87      <td class="center">6</td>
88      <td class="center">A</td>
89    </tr>
90    <tr class="gradeA">
91      <td>Trident</td>
92      <td>Internet Explorer 7</td>
93      <td>Win XP SP2+</td>
94      <td class="center">7</td>
95      <td class="center">A</td>
96    </tr>
97    <tr class="gradeA">
98      <td>Trident</td>
99      <td>AOL browser (AOL desktop)</td>
100      <td>Win XP</td>
101      <td class="center">6</td>
102      <td class="center">A</td>
103    </tr>
104    <tr class="gradeA">
105      <td>Gecko</td>
106      <td>Firefox 1.0</td>
107      <td>Win 98+ / OSX.2+</td>
108      <td class="center">1.7</td>
109      <td class="center">A</td>
110    </tr>
111    <tr class="gradeA">
112      <td>Gecko</td>
113      <td>Firefox 1.5</td>
114      <td>Win 98+ / OSX.2+</td>
115      <td class="center">1.8</td>
116      <td class="center">A</td>
117    </tr>
118    <tr class="gradeA">
119      <td>Gecko</td>
120      <td>Firefox 2.0</td>
121      <td>Win 98+ / OSX.2+</td>
122      <td class="center">1.8</td>
123      <td class="center">A</td>
124    </tr>
125    <tr class="gradeA">
126      <td>Gecko</td>
127      <td>Firefox 3.0</td>
128      <td>Win 2k+ / OSX.3+</td>
129      <td class="center">1.9</td>
130      <td class="center">A</td>
131    </tr>
132    <tr class="gradeA">
133      <td>Gecko</td>
134      <td>Camino 1.0</td>
135      <td>OSX.2+</td>
136      <td class="center">1.8</td>
137      <td class="center">A</td>
138    </tr>
139    <tr class="gradeA">
140      <td>Gecko</td>
141      <td>Camino 1.5</td>
142      <td>OSX.3+</td>
143      <td class="center">1.8</td>
144      <td class="center">A</td>
145    </tr>
146    <tr class="gradeA">
147      <td>Gecko</td>
148      <td>Netscape 7.2</td>
149      <td>Win 95+ / Mac OS 8.6-9.2</td>
150      <td class="center">1.7</td>
151      <td class="center">A</td>
152    </tr>
153    <tr class="gradeA">
154      <td>Gecko</td>
155      <td>Netscape Browser 8</td>
156      <td>Win 98SE+</td>
157      <td class="center">1.7</td>
158      <td class="center">A</td>
159    </tr>
160    <tr class="gradeA">
161      <td>Gecko</td>
162      <td>Netscape Navigator 9</td>
163      <td>Win 98+ / OSX.2+</td>
164      <td class="center">1.8</td>
165      <td class="center">A</td>
166    </tr>
167    <tr class="gradeA">
168      <td>Gecko</td>
169      <td>Mozilla 1.0</td>
170      <td>Win 95+ / OSX.1+</td>
171      <td class="center">1</td>
172      <td class="center">A</td>
173    </tr>
174    <tr class="gradeA">
175      <td>Gecko</td>
176      <td>Mozilla 1.1</td>
177      <td>Win 95+ / OSX.1+</td>
178      <td class="center">1.1</td>
179      <td class="center">A</td>
180    </tr>
181    <tr class="gradeA">
182      <td>Gecko</td>
183      <td>Mozilla 1.2</td>
184      <td>Win 95+ / OSX.1+</td>
185      <td class="center">1.2</td>
186      <td class="center">A</td>
187    </tr>
188    <tr class="gradeA">
189      <td>Gecko</td>
190      <td>Mozilla 1.3</td>
191      <td>Win 95+ / OSX.1+</td>
192      <td class="center">1.3</td>
193      <td class="center">A</td>
194    </tr>
195    <tr class="gradeA">
196      <td>Gecko</td>
197      <td>Mozilla 1.4</td>
198      <td>Win 95+ / OSX.1+</td>
199      <td class="center">1.4</td>
200      <td class="center">A</td>
201    </tr>
202    <tr class="gradeA">
203      <td>Gecko</td>
204      <td>Mozilla 1.5</td>
205      <td>Win 95+ / OSX.1+</td>
206      <td class="center">1.5</td>
207      <td class="center">A</td>
208    </tr>
209    <tr class="gradeA">
210      <td>Gecko</td>
211      <td>Mozilla 1.6</td>
212      <td>Win 95+ / OSX.1+</td>
213      <td class="center">1.6</td>
214      <td class="center">A</td>
215    </tr>
216    <tr class="gradeA">
217      <td>Gecko</td>
218      <td>Mozilla 1.7</td>
219      <td>Win 98+ / OSX.1+</td>
220      <td class="center">1.7</td>
221      <td class="center">A</td>
222    </tr>
223    <tr class="gradeA">
224      <td>Gecko</td>
225      <td>Mozilla 1.8</td>
226      <td>Win 98+ / OSX.1+</td>
227      <td class="center">1.8</td>
228      <td class="center">A</td>
229    </tr>
230    <tr class="gradeA">
231      <td>Gecko</td>
232      <td>Seamonkey 1.1</td>
233      <td>Win 98+ / OSX.2+</td>
234      <td class="center">1.8</td>
235      <td class="center">A</td>
236    </tr>
237    <tr class="gradeA">
238      <td>Gecko</td>
239      <td>Epiphany 2.20</td>
240      <td>Gnome</td>
241      <td class="center">1.8</td>
242      <td class="center">A</td>
243    </tr>
244    <tr class="gradeA">
245      <td>Webkit</td>
246      <td>Safari 1.2</td>
247      <td>OSX.3</td>
248      <td class="center">125.5</td>
249      <td class="center">A</td>
250    </tr>
251    <tr class="gradeA">
252      <td>Webkit</td>
253      <td>Safari 1.3</td>
254      <td>OSX.3</td>
255      <td class="center">312.8</td>
256      <td class="center">A</td>
257    </tr>
258    <tr class="gradeA">
259      <td>Webkit</td>
260      <td>Safari 2.0</td>
261      <td>OSX.4+</td>
262      <td class="center">419.3</td>
263      <td class="center">A</td>
264    </tr>
265    <tr class="gradeA">
266      <td>Webkit</td>
267      <td>Safari 3.0</td>
268      <td>OSX.4+</td>
269      <td class="center">522.1</td>
270      <td class="center">A</td>
271    </tr>
272    <tr class="gradeA">
273      <td>Webkit</td>
274      <td>OmniWeb 5.5</td>
275      <td>OSX.4+</td>
276      <td class="center">420</td>
277      <td class="center">A</td>
278    </tr>
279    <tr class="gradeA">
280      <td>Webkit</td>
281      <td>iPod Touch / iPhone</td>
282      <td>iPod</td>
283      <td class="center">420.1</td>
284      <td class="center">A</td>
285    </tr>
286    <tr class="gradeA">
287      <td>Webkit</td>
288      <td>S60</td>
289      <td>S60</td>
290      <td class="center">413</td>
291      <td class="center">A</td>
292    </tr>
293    <tr class="gradeA">
294      <td>Presto</td>
295      <td>Opera 7.0</td>
296      <td>Win 95+ / OSX.1+</td>
297      <td class="center">-</td>
298      <td class="center">A</td>
299    </tr>
300    <tr class="gradeA">
301      <td>Presto</td>
302      <td>Opera 7.5</td>
303      <td>Win 95+ / OSX.2+</td>
304      <td class="center">-</td>
305      <td class="center">A</td>
306    </tr>
307    <tr class="gradeA">
308      <td>Presto</td>
309      <td>Opera 8.0</td>
310      <td>Win 95+ / OSX.2+</td>
311      <td class="center">-</td>
312      <td class="center">A</td>
313    </tr>
314    <tr class="gradeA">
315      <td>Presto</td>
316      <td>Opera 8.5</td>
317      <td>Win 95+ / OSX.2+</td>
318      <td class="center">-</td>
319      <td class="center">A</td>
320    </tr>
321    <tr class="gradeA">
322      <td>Presto</td>
323      <td>Opera 9.0</td>
324      <td>Win 95+ / OSX.3+</td>
325      <td class="center">-</td>
326      <td class="center">A</td>
327    </tr>
328    <tr class="gradeA">
329      <td>Presto</td>
330      <td>Opera 9.2</td>
331      <td>Win 88+ / OSX.3+</td>
332      <td class="center">-</td>
333      <td class="center">A</td>
334    </tr>
335    <tr class="gradeA">
336      <td>Presto</td>
337      <td>Opera 9.5</td>
338      <td>Win 88+ / OSX.3+</td>
339      <td class="center">-</td>
340      <td class="center">A</td>
341    </tr>
342    <tr class="gradeA">
343      <td>Presto</td>
344      <td>Opera for Wii</td>
345      <td>Wii</td>
346      <td class="center">-</td>
347      <td class="center">A</td>
348    </tr>
349    <tr class="gradeA">
350      <td>Presto</td>
351      <td>Nokia N800</td>
352      <td>N800</td>
353      <td class="center">-</td>
354      <td class="center">A</td>
355    </tr>
356    <tr class="gradeA">
357      <td>Presto</td>
358      <td>Nintendo DS browser</td>
359      <td>Nintendo DS</td>
360      <td class="center">8.5</td>
361      <td class="center">C/A<sup>1</sup></td>
362    </tr>
363    <tr class="gradeC">
364      <td>KHTML</td>
365      <td>Konqureror 3.1</td>
366      <td>KDE 3.1</td>
367      <td class="center">3.1</td>
368      <td class="center">C</td>
369    </tr>
370    <tr class="gradeA">
371      <td>KHTML</td>
372      <td>Konqureror 3.3</td>
373      <td>KDE 3.3</td>
374      <td class="center">3.3</td>
375      <td class="center">A</td>
376    </tr>
377    <tr class="gradeA">
378      <td>KHTML</td>
379      <td>Konqureror 3.5</td>
380      <td>KDE 3.5</td>
381      <td class="center">3.5</td>
382      <td class="center">A</td>
383    </tr>
384    <tr class="gradeX">
385      <td>Tasman</td>
386      <td>Internet Explorer 4.5</td>
387      <td>Mac OS 8-9</td>
388      <td class="center">-</td>
389      <td class="center">X</td>
390    </tr>
391    <tr class="gradeC">
392      <td>Tasman</td>
393      <td>Internet Explorer 5.1</td>
394      <td>Mac OS 7.6-9</td>
395      <td class="center">1</td>
396      <td class="center">C</td>
397    </tr>
398    <tr class="gradeC">
399      <td>Tasman</td>
400      <td>Internet Explorer 5.2</td>
401      <td>Mac OS 8-X</td>
402      <td class="center">1</td>
403      <td class="center">C</td>
404    </tr>
405    <tr class="gradeA">
406      <td>Misc</td>
407      <td>NetFront 3.1</td>
408      <td>Embedded devices</td>
409      <td class="center">-</td>
410      <td class="center">C</td>
411    </tr>
412    <tr class="gradeA">
413      <td>Misc</td>
414      <td>NetFront 3.4</td>
415      <td>Embedded devices</td>
416      <td class="center">-</td>
417      <td class="center">A</td>
418    </tr>
419    <tr class="gradeX">
420      <td>Misc</td>
421      <td>Dillo 0.8</td>
422      <td>Embedded devices</td>
423      <td class="center">-</td>
424      <td class="center">X</td>
425    </tr>
426    <tr class="gradeX">
427      <td>Misc</td>
428      <td>Links</td>
429      <td>Text only</td>
430      <td class="center">-</td>
431      <td class="center">X</td>
432    </tr>
433    <tr class="gradeX">
434      <td>Misc</td>
435      <td>Lynx</td>
436      <td>Text only</td>
437      <td class="center">-</td>
438      <td class="center">X</td>
439    </tr>
440    <tr class="gradeC">
441      <td>Misc</td>
442      <td>IE Mobile</td>
443      <td>Windows Mobile 6</td>
444      <td class="center">-</td>
445      <td class="center">C</td>
446    </tr>
447    <tr class="gradeC">
448      <td>Misc</td>
449      <td>PSP browser</td>
450      <td>PSP</td>
451      <td class="center">-</td>
452      <td class="center">C</td>
453    </tr>
454    <tr class="gradeU">
455      <td>Other browsers</td>
456      <td>All others</td>
457      <td>-</td>
458      <td class="center">-</td>
459      <td class="center">U</td>
460    </tr>
461  </tbody>
462  <tfoot>
463    <tr>
464      <th>Rendering engine</th>
465      <th>Browser</th>
466      <th>Platform(s)</th>
467      <th>Engine version</th>
468      <th>CSS grade</th>
469    </tr>
470  </tfoot>
471</table>
472      </div>
473      <div class="spacer"></div>
474     
475     
476      <h1>Initialisation code</h1>
477      <pre>/* Define two custom functions (asc and desc) for string sorting */
478jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
479  return ((x < y) ? -1 : ((x > y) ?  1 : 0));
480};
481
482jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
483  return ((x < y) ?  1 : ((x > y) ? -1 : 0));
484};
485
486$(document).ready(function() {
487  /* Build the DataTable with third column using our custom sort functions */
488  $('#example').dataTable( {
489    "aaSorting": [ [0,'asc'], [1,'asc'] ],
490    "aoColumns": [
491      null,
492      null,
493      { "sType": 'string-case' },
494      null,
495      null
496    ]
497  } );
498} );</pre>
499     
500     
501      <h1>Other examples</h1>
502      <h2>Basic initialisation</h2>
503      <ul>
504        <li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
505        <li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
506        <li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
507        <li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
508        <li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
509        <li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
510        <li><a href="../basic_init/dom.html">DOM positioning</a></li>
511        <li><a href="../basic_init/state_save.html">State saving</a></li>
512        <li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
513        <li>Scrolling:
514          <a href="../basic_init/scroll_x.html">Horizontal</a> /
515          <a href="../basic_init/scroll_y.html">Vertical</a> /
516          <a href="../basic_init/scroll_xy.html">Both</a> /
517          <a href="../basic_init/scroll_y_theme.html">Themed</a> /
518          <a href="../basic_init/scroll_y_infinite.html">Infinite</a>
519        </li>
520        <li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
521        <li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
522      </ul>
523     
524      <h2>Advanced initialisation</h2>
525      <ul>
526        <li><a href="../advanced_init/events_pre_init.html">Events (pre initialisation)</a></li>
527        <li><a href="../advanced_init/events_post_init.html">Events (post initialisation)</a></li>
528        <li><a href="../advanced_init/column_render.html">Column rendering</a></li>
529        <li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
530        <li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
531        <li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
532        <li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
533        <li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
534        <li><a href="../advanced_init/complex_header.html">Column grouping through col/row spans</a></li>
535        <li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
536        <li><a href="../advanced_init/row_callback.html">Row callback</a></li>
537        <li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
538        <li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
539      </ul>
540     
541      <h2>Data sources</h2>
542      <ul>
543        <li><a href="../data_sources/dom.html">DOM</a></li>
544        <li><a href="../data_sources/js_array.html">Javascript array</a></li>
545        <li><a href="../data_sources/ajax.html">Ajax source</a></li>
546        <li><a href="../data_sources/server_side.html">Server side processing</a></li>
547      </ul>
548     
549      <h2>Server-side processing</h2>
550      <ul>
551        <li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
552        <li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
553        <li><a href="../server_side/post.html">Use HTTP POST</a></li>
554        <li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
555        <li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
556        <li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
557        <li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
558      </ul>
559     
560      <h2>API</h2>
561      <ul>
562        <li><a href="../api/add_row.html">Dynamically add a new row</a></li>
563        <li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
564        <li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
565        <li><a href="../api/highlight.html">Highlight rows and columns</a></li>
566        <li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
567        <li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
568        <li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
569        <li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
570        <li><a href="../api/form.html">Submit form with elements in table</a></li>
571        <li><a href="../api/counter_column.html">Index column (static number column)</a></li>
572        <li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
573        <li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
574        <li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
575        <li><a href="../api/regex.html">Regular expression filtering</a></li>
576      </ul>
577     
578      <h2>Plug-ins</h2>
579      <ul>
580        <li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
581        <li><a href="../plug-ins/sorting_plugin.html">Sorting and type detection</a></li>
582        <li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
583        <li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
584        <li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
585        <li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
586      </ul>
587     
588     
589      <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>
590     
591     
592      <div id="footer" style="text-align:center;">
593        <span style="font-size:10px;">DataTables &copy; Allan Jardine 2008-2010</span>
594      </div>
595    </div>
596  </body>
597</html>
Note: See TracBrowser for help on using the repository browser.