webapp/resources/datatables-1.9.4/examples/api/multi_filter_select.html

   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                         (function($) {
  16                         /*
  17                          * Function: fnGetColumnData
  18                          * Purpose:  Return an array of table values from a particular column.
  19                          * Returns:  array string: 1d data array
  20                          * Inputs:   object:oSettings - dataTable settings object. This is always the last argument past to the function
  21                          *           int:iColumn - the id of the column to extract the data from
  22                          *           bool:bUnique - optional - if set to false duplicated values are not filtered out
  23                          *           bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
  24                          *           bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
  25                          * Author:   Benedikt Forchhammer <b.forchhammer /AT\ mind2.de>
  26                          */
  27                         $.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
  28                                 // check that we have a column id
  29                                 if ( typeof iColumn == "undefined" ) return new Array();
  30
  31                                 // by default we only want unique data
  32                                 if ( typeof bUnique == "undefined" ) bUnique = true;
  33
  34                                 // by default we do want to only look at filtered data
  35                                 if ( typeof bFiltered == "undefined" ) bFiltered = true;
  36
  37                                 // by default we do not want to include empty values
  38                                 if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;
  39
  40                                 // list of rows which we're going to loop through
  41                                 var aiRows;
  42
  43                                 // use only filtered rows
  44                                 if (bFiltered == true) aiRows = oSettings.aiDisplay;
  45                                 // use all rows
  46                                 else aiRows = oSettings.aiDisplayMaster; // all row numbers
  47
  48                                 // set up data array
  49                                 var asResultData = new Array();
  50
  51                                 for (var i=0,c=aiRows.length; i<c; i++) {
  52                                         iRow = aiRows[i];
  53                                         var aData = this.fnGetData(iRow);
  54                                         var sValue = aData[iColumn];
  55
  56                                         // ignore empty values?
  57                                         if (bIgnoreEmpty == true && sValue.length == 0) continue;
  58
  59                                         // ignore unique values?
  60                                         else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
  61
  62                                         // else push the value onto the result data array
  63                                         else asResultData.push(sValue);
  64                                 }
  65
  66                                 return asResultData;
  67                         }}(jQuery));
  68
  69
  70                         function fnCreateSelect( aData )
  71                         {
  72                                 var r='<select><option value=""></option>', i, iLen=aData.length;
  73                                 for ( i=0 ; i<iLen ; i++ )
  74                                 {
  75                                         r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
  76                                 }
  77                                 return r+'</select>';
  78                         }
  79
  80
  81                         $(document).ready(function() {
  82                                 /* Initialise the DataTable */
  83                                 var oTable = $('#example').dataTable( {
  84                                         "oLanguage": {
  85                                                 "sSearch": "Search all columns:"
  86                                         }
  87                                 } );
  88
  89                                 /* Add a select menu for each TH element in the table footer */
  90                                 $("tfoot th").each( function ( i ) {
  91                                         this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
  92                                         $('select', this).change( function () {
  93                                                 oTable.fnFilter( $(this).val(), i );
  94                                         } );
  95                                 } );
  96                         } );
  97                 </script>
  98         </head>
  99         <body id="dt_example">
 100                 <div id="container">
 101                         <div class="full_width big">
 102                                 DataTables individual column filtering example (using select menus)
 103                         </div>
 104
 105                         <h1>Preamble</h1>
 106                         <p>This example is almost identical to <a href="multi_filter.html">individual column example</a> and provides the same functionality, but using &lt;select&gt; menus rather than input elements. The API plug-in function fnGetColumnData from Benedikt Forchhammer provides much of the logic processing required, and integration with a table is almost trivial.</p>
 107                         <p>One possible interaction chance would be to make use of fnGetColumnData's ability to get filtered data, so you could have the possible filtering values in the select menus to update to only those in the table, rather than all values.</p>
 108
 109                         <h1>Live example</h1>
 110                         <div id="demo">
 111 <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
 112         <thead>
 113                 <tr>
 114                         <th>Rendering engine</th>
 115                         <th>Browser</th>
 116                         <th>Platform(s)</th>
 117                         <th>Engine version</th>
 118                         <th>CSS grade</th>
 119                 </tr>
 120         </thead>
 121         <tbody>
 122                 <tr class="gradeX">
 123                         <td>Trident</td>
 124                         <td>Internet
 125                                  Explorer 4.0</td>
 126                         <td>Win 95+</td>
 127                         <td class="center">4</td>
 128                         <td class="center">X</td>
 129                 </tr>
 130                 <tr class="gradeC">
 131                         <td>Trident</td>
 132                         <td>Internet
 133                                  Explorer 5.0</td>
 134                         <td>Win 95+</td>
 135                         <td class="center">5</td>
 136                         <td class="center">C</td>
 137                 </tr>
 138                 <tr class="gradeA">
 139                         <td>Trident</td>
 140                         <td>Internet
 141                                  Explorer 5.5</td>
 142                         <td>Win 95+</td>
 143                         <td class="center">5.5</td>
 144                         <td class="center">A</td>
 145                 </tr>
 146                 <tr class="gradeA">
 147                         <td>Trident</td>
 148                         <td>Internet
 149                                  Explorer 6</td>
 150                         <td>Win 98+</td>
 151                         <td class="center">6</td>
 152                         <td class="center">A</td>
 153                 </tr>
 154                 <tr class="gradeA">
 155                         <td>Trident</td>
 156                         <td>Internet Explorer 7</td>
 157                         <td>Win XP SP2+</td>
 158                         <td class="center">7</td>
 159                         <td class="center">A</td>
 160                 </tr>
 161                 <tr class="gradeA">
 162                         <td>Trident</td>
 163                         <td>AOL browser (AOL desktop)</td>
 164                         <td>Win XP</td>
 165                         <td class="center">6</td>
 166                         <td class="center">A</td>
 167                 </tr>
 168                 <tr class="gradeA">
 169                         <td>Gecko</td>
 170                         <td>Firefox 1.0</td>
 171                         <td>Win 98+ / OSX.2+</td>
 172                         <td class="center">1.7</td>
 173                         <td class="center">A</td>
 174                 </tr>
 175                 <tr class="gradeA">
 176                         <td>Gecko</td>
 177                         <td>Firefox 1.5</td>
 178                         <td>Win 98+ / OSX.2+</td>
 179                         <td class="center">1.8</td>
 180                         <td class="center">A</td>
 181                 </tr>
 182                 <tr class="gradeA">
 183                         <td>Gecko</td>
 184                         <td>Firefox 2.0</td>
 185                         <td>Win 98+ / OSX.2+</td>
 186                         <td class="center">1.8</td>
 187                         <td class="center">A</td>
 188                 </tr>
 189                 <tr class="gradeA">
 190                         <td>Gecko</td>
 191                         <td>Firefox 3.0</td>
 192                         <td>Win 2k+ / OSX.3+</td>
 193                         <td class="center">1.9</td>
 194                         <td class="center">A</td>
 195                 </tr>
 196                 <tr class="gradeA">
 197                         <td>Gecko</td>
 198                         <td>Camino 1.0</td>
 199                         <td>OSX.2+</td>
 200                         <td class="center">1.8</td>
 201                         <td class="center">A</td>
 202                 </tr>
 203                 <tr class="gradeA">
 204                         <td>Gecko</td>
 205                         <td>Camino 1.5</td>
 206                         <td>OSX.3+</td>
 207                         <td class="center">1.8</td>
 208                         <td class="center">A</td>
 209                 </tr>
 210                 <tr class="gradeA">
 211                         <td>Gecko</td>
 212                         <td>Netscape 7.2</td>
 213                         <td>Win 95+ / Mac OS 8.6-9.2</td>
 214                         <td class="center">1.7</td>
 215                         <td class="center">A</td>
 216                 </tr>
 217                 <tr class="gradeA">
 218                         <td>Gecko</td>
 219                         <td>Netscape Browser 8</td>
 220                         <td>Win 98SE+</td>
 221                         <td class="center">1.7</td>
 222                         <td class="center">A</td>
 223                 </tr>
 224                 <tr class="gradeA">
 225                         <td>Gecko</td>
 226                         <td>Netscape Navigator 9</td>
 227                         <td>Win 98+ / OSX.2+</td>
 228                         <td class="center">1.8</td>
 229                         <td class="center">A</td>
 230                 </tr>
 231                 <tr class="gradeA">
 232                         <td>Gecko</td>
 233                         <td>Mozilla 1.0</td>
 234                         <td>Win 95+ / OSX.1+</td>
 235                         <td class="center">1</td>
 236                         <td class="center">A</td>
 237                 </tr>
 238                 <tr class="gradeA">
 239                         <td>Gecko</td>
 240                         <td>Mozilla 1.1</td>
 241                         <td>Win 95+ / OSX.1+</td>
 242                         <td class="center">1.1</td>
 243                         <td class="center">A</td>
 244                 </tr>
 245                 <tr class="gradeA">
 246                         <td>Gecko</td>
 247                         <td>Mozilla 1.2</td>
 248                         <td>Win 95+ / OSX.1+</td>
 249                         <td class="center">1.2</td>
 250                         <td class="center">A</td>
 251                 </tr>
 252                 <tr class="gradeA">
 253                         <td>Gecko</td>
 254                         <td>Mozilla 1.3</td>
 255                         <td>Win 95+ / OSX.1+</td>
 256                         <td class="center">1.3</td>
 257                         <td class="center">A</td>
 258                 </tr>
 259                 <tr class="gradeA">
 260                         <td>Gecko</td>
 261                         <td>Mozilla 1.4</td>
 262                         <td>Win 95+ / OSX.1+</td>
 263                         <td class="center">1.4</td>
 264                         <td class="center">A</td>
 265                 </tr>
 266                 <tr class="gradeA">
 267                         <td>Gecko</td>
 268                         <td>Mozilla 1.5</td>
 269                         <td>Win 95+ / OSX.1+</td>
 270                         <td class="center">1.5</td>
 271                         <td class="center">A</td>
 272                 </tr>
 273                 <tr class="gradeA">
 274                         <td>Gecko</td>
 275                         <td>Mozilla 1.6</td>
 276                         <td>Win 95+ / OSX.1+</td>
 277                         <td class="center">1.6</td>
 278                         <td class="center">A</td>
 279                 </tr>
 280                 <tr class="gradeA">
 281                         <td>Gecko</td>
 282                         <td>Mozilla 1.7</td>
 283                         <td>Win 98+ / OSX.1+</td>
 284                         <td class="center">1.7</td>
 285                         <td class="center">A</td>
 286                 </tr>
 287                 <tr class="gradeA">
 288                         <td>Gecko</td>
 289                         <td>Mozilla 1.8</td>
 290                         <td>Win 98+ / OSX.1+</td>
 291                         <td class="center">1.8</td>
 292                         <td class="center">A</td>
 293                 </tr>
 294                 <tr class="gradeA">
 295                         <td>Gecko</td>
 296                         <td>Seamonkey 1.1</td>
 297                         <td>Win 98+ / OSX.2+</td>
 298                         <td class="center">1.8</td>
 299                         <td class="center">A</td>
 300                 </tr>
 301                 <tr class="gradeA">
 302                         <td>Gecko</td>
 303                         <td>Epiphany 2.20</td>
 304                         <td>Gnome</td>
 305                         <td class="center">1.8</td>
 306                         <td class="center">A</td>
 307                 </tr>
 308                 <tr class="gradeA">
 309                         <td>Webkit</td>
 310                         <td>Safari 1.2</td>
 311                         <td>OSX.3</td>
 312                         <td class="center">125.5</td>
 313                         <td class="center">A</td>
 314                 </tr>
 315                 <tr class="gradeA">
 316                         <td>Webkit</td>
 317                         <td>Safari 1.3</td>
 318                         <td>OSX.3</td>
 319                         <td class="center">312.8</td>
 320                         <td class="center">A</td>
 321                 </tr>
 322                 <tr class="gradeA">
 323                         <td>Webkit</td>
 324                         <td>Safari 2.0</td>
 325                         <td>OSX.4+</td>
 326                         <td class="center">419.3</td>
 327                         <td class="center">A</td>
 328                 </tr>
 329                 <tr class="gradeA">
 330                         <td>Webkit</td>
 331                         <td>Safari 3.0</td>
 332                         <td>OSX.4+</td>
 333                         <td class="center">522.1</td>
 334                         <td class="center">A</td>
 335                 </tr>
 336                 <tr class="gradeA">
 337                         <td>Webkit</td>
 338                         <td>OmniWeb 5.5</td>
 339                         <td>OSX.4+</td>
 340                         <td class="center">420</td>
 341                         <td class="center">A</td>
 342                 </tr>
 343                 <tr class="gradeA">
 344                         <td>Webkit</td>
 345                         <td>iPod Touch / iPhone</td>
 346                         <td>iPod</td>
 347                         <td class="center">420.1</td>
 348                         <td class="center">A</td>
 349                 </tr>
 350                 <tr class="gradeA">
 351                         <td>Webkit</td>
 352                         <td>S60</td>
 353                         <td>S60</td>
 354                         <td class="center">413</td>
 355                         <td class="center">A</td>
 356                 </tr>
 357                 <tr class="gradeA">
 358                         <td>Presto</td>
 359                         <td>Opera 7.0</td>
 360                         <td>Win 95+ / OSX.1+</td>
 361                         <td class="center">-</td>
 362                         <td class="center">A</td>
 363                 </tr>
 364                 <tr class="gradeA">
 365                         <td>Presto</td>
 366                         <td>Opera 7.5</td>
 367                         <td>Win 95+ / OSX.2+</td>
 368                         <td class="center">-</td>
 369                         <td class="center">A</td>
 370                 </tr>
 371                 <tr class="gradeA">
 372                         <td>Presto</td>
 373                         <td>Opera 8.0</td>
 374                         <td>Win 95+ / OSX.2+</td>
 375                         <td class="center">-</td>
 376                         <td class="center">A</td>
 377                 </tr>
 378                 <tr class="gradeA">
 379                         <td>Presto</td>
 380                         <td>Opera 8.5</td>
 381                         <td>Win 95+ / OSX.2+</td>
 382                         <td class="center">-</td>
 383                         <td class="center">A</td>
 384                 </tr>
 385                 <tr class="gradeA">
 386                         <td>Presto</td>
 387                         <td>Opera 9.0</td>
 388                         <td>Win 95+ / OSX.3+</td>
 389                         <td class="center">-</td>
 390                         <td class="center">A</td>
 391                 </tr>
 392                 <tr class="gradeA">
 393                         <td>Presto</td>
 394                         <td>Opera 9.2</td>
 395                         <td>Win 88+ / OSX.3+</td>
 396                         <td class="center">-</td>
 397                         <td class="center">A</td>
 398                 </tr>
 399                 <tr class="gradeA">
 400                         <td>Presto</td>
 401                         <td>Opera 9.5</td>
 402                         <td>Win 88+ / OSX.3+</td>
 403                         <td class="center">-</td>
 404                         <td class="center">A</td>
 405                 </tr>
 406                 <tr class="gradeA">
 407                         <td>Presto</td>
 408                         <td>Opera for Wii</td>
 409                         <td>Wii</td>
 410                         <td class="center">-</td>
 411                         <td class="center">A</td>
 412                 </tr>
 413                 <tr class="gradeA">
 414                         <td>Presto</td>
 415                         <td>Nokia N800</td>
 416                         <td>N800</td>
 417                         <td class="center">-</td>
 418                         <td class="center">A</td>
 419                 </tr>
 420                 <tr class="gradeA">
 421                         <td>Presto</td>
 422                         <td>Nintendo DS browser</td>
 423                         <td>Nintendo DS</td>
 424                         <td class="center">8.5</td>
 425                         <td class="center">C/A<sup>1</sup></td>
 426                 </tr>
 427                 <tr class="gradeC">
 428                         <td>KHTML</td>
 429                         <td>Konqureror 3.1</td>
 430                         <td>KDE 3.1</td>
 431                         <td class="center">3.1</td>
 432                         <td class="center">C</td>
 433                 </tr>
 434                 <tr class="gradeA">
 435                         <td>KHTML</td>
 436                         <td>Konqureror 3.3</td>
 437                         <td>KDE 3.3</td>
 438                         <td class="center">3.3</td>
 439                         <td class="center">A</td>
 440                 </tr>
 441                 <tr class="gradeA">
 442                         <td>KHTML</td>
 443                         <td>Konqureror 3.5</td>
 444                         <td>KDE 3.5</td>
 445                         <td class="center">3.5</td>
 446                         <td class="center">A</td>
 447                 </tr>
 448                 <tr class="gradeX">
 449                         <td>Tasman</td>
 450                         <td>Internet Explorer 4.5</td>
 451                         <td>Mac OS 8-9</td>
 452                         <td class="center">-</td>
 453                         <td class="center">X</td>
 454                 </tr>
 455                 <tr class="gradeC">
 456                         <td>Tasman</td>
 457                         <td>Internet Explorer 5.1</td>
 458                         <td>Mac OS 7.6-9</td>
 459                         <td class="center">1</td>
 460                         <td class="center">C</td>
 461                 </tr>
 462                 <tr class="gradeC">
 463                         <td>Tasman</td>
 464                         <td>Internet Explorer 5.2</td>
 465                         <td>Mac OS 8-X</td>
 466                         <td class="center">1</td>
 467                         <td class="center">C</td>
 468                 </tr>
 469                 <tr class="gradeA">
 470                         <td>Misc</td>
 471                         <td>NetFront 3.1</td>
 472                         <td>Embedded devices</td>
 473                         <td class="center">-</td>
 474                         <td class="center">C</td>
 475                 </tr>
 476                 <tr class="gradeA">
 477                         <td>Misc</td>
 478                         <td>NetFront 3.4</td>
 479                         <td>Embedded devices</td>
 480                         <td class="center">-</td>
 481                         <td class="center">A</td>
 482                 </tr>
 483                 <tr class="gradeX">
 484                         <td>Misc</td>
 485                         <td>Dillo 0.8</td>
 486                         <td>Embedded devices</td>
 487                         <td class="center">-</td>
 488                         <td class="center">X</td>
 489                 </tr>
 490                 <tr class="gradeX">
 491                         <td>Misc</td>
 492                         <td>Links</td>
 493                         <td>Text only</td>
 494                         <td class="center">-</td>
 495                         <td class="center">X</td>
 496                 </tr>
 497                 <tr class="gradeX">
 498                         <td>Misc</td>
 499                         <td>Lynx</td>
 500                         <td>Text only</td>
 501                         <td class="center">-</td>
 502                         <td class="center">X</td>
 503                 </tr>
 504                 <tr class="gradeC">
 505                         <td>Misc</td>
 506                         <td>IE Mobile</td>
 507                         <td>Windows Mobile 6</td>
 508                         <td class="center">-</td>
 509                         <td class="center">C</td>
 510                 </tr>
 511                 <tr class="gradeC">
 512                         <td>Misc</td>
 513                         <td>PSP browser</td>
 514                         <td>PSP</td>
 515                         <td class="center">-</td>
 516                         <td class="center">C</td>
 517                 </tr>
 518                 <tr class="gradeU">
 519                         <td>Other browsers</td>
 520                         <td>All others</td>
 521                         <td>-</td>
 522                         <td class="center">-</td>
 523                         <td class="center">U</td>
 524                 </tr>
 525         </tbody>
 526         <tfoot>
 527                 <tr>
 528                         <th></th>
 529                         <th></th>
 530                         <th></th>
 531                         <th></th>
 532                         <th></th>
 533                 </tr>
 534         </tfoot>
 535 </table>
 536                         </div>
 537                         <div class="spacer"></div>
 538
 539
 540                         <h1>Initialisation code</h1>
 541                         <pre class="brush: js;">(function($) {
 542 /*
 543  * Function: fnGetColumnData
 544  * Purpose:  Return an array of table values from a particular column.
 545  * Returns:  array string: 1d data array
 546  * Inputs:   object:oSettings - dataTable settings object. This is always the last argument past to the function
 547  *           int:iColumn - the id of the column to extract the data from
 548  *           bool:bUnique - optional - if set to false duplicated values are not filtered out
 549  *           bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
 550  *           bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
 551  * Author:   Benedikt Forchhammer &lt;b.forchhammer /AT\ mind2.de&gt;
 552  */
 553 $.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
 554         // check that we have a column id
 555         if ( typeof iColumn == "undefined" ) return new Array();
 556
 557         // by default we only want unique data
 558         if ( typeof bUnique == "undefined" ) bUnique = true;
 559
 560         // by default we do want to only look at filtered data
 561         if ( typeof bFiltered == "undefined" ) bFiltered = true;
 562
 563         // by default we do not want to include empty values
 564         if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;
 565
 566         // list of rows which we're going to loop through
 567         var aiRows;
 568
 569         // use only filtered rows
 570         if (bFiltered == true) aiRows = oSettings.aiDisplay;
 571         // use all rows
 572         else aiRows = oSettings.aiDisplayMaster; // all row numbers
 573
 574         // set up data array
 575         var asResultData = new Array();
 576
 577         for (var i=0,c=aiRows.length; i&lt;c; i++) {
 578                 iRow = aiRows[i];
 579                 var aData = this.fnGetData(iRow);
 580                 var sValue = aData[iColumn];
 581
 582                 // ignore empty values?
 583                 if (bIgnoreEmpty == true &amp;&amp; sValue.length == 0) continue;
 584
 585                 // ignore unique values?
 586                 else if (bUnique == true &amp;&amp; jQuery.inArray(sValue, asResultData) &gt; -1) continue;
 587
 588                 // else push the value onto the result data array
 589                 else asResultData.push(sValue);
 590         }
 591
 592         return asResultData;
 593 }}(jQuery));
 594
 595
 596 function fnCreateSelect( aData )
 597 {
 598         var r='&lt;select&gt;&lt;option value=""&gt;&lt;/option&gt;', i, iLen=aData.length;
 599         for ( i=0 ; i&lt;iLen ; i++ )
 600         {
 601                 r += '&lt;option value="'+aData[i]+'"&gt;'+aData[i]+'&lt;/option&gt;';
 602         }
 603         return r+'&lt;/select&gt;';
 604 }
 605
 606
 607 $(document).ready(function() {
 608         /* Initialise the DataTable */
 609         var oTable = $('#example').dataTable( {
 610                 "oLanguage": {
 611                         "sSearch": "Search all columns:"
 612                 }
 613         } );
 614
 615         /* Add a select menu for each TH element in the table footer */
 616         $("tfoot th").each( function ( i ) {
 617                 this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
 618                 $('select', this).change( function () {
 619                         oTable.fnFilter( $(this).val(), i );
 620                 } );
 621         } );
 622 } );</pre>
 623                         <style type="text/css">
 624                                 @import "../examples_support/syntax/css/shCore.css";
 625                         </style>
 626                         <script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 627
 628
 629                         <h1>Other examples</h1>
 630                         <div class="demo_links">
 631                                 <h2>Basic initialisation</h2>
 632                                 <ul>
 633                                         <li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
 634                                         <li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
 635                                         <li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
 636                                         <li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
 637                                         <li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
 638                                         <li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
 639                                         <li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
 640                                         <li><a href="../basic_init/dom.html">DOM positioning</a></li>
 641                                         <li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
 642                                         <li><a href="../basic_init/state_save.html">State saving</a></li>
 643                                         <li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
 644                                         <li>Scrolling: <br>
 645                                                 <a href="../basic_init/scroll_x.html">Horizontal</a> /
 646                                                 <a href="../basic_init/scroll_y.html">Vertical</a> /
 647                                                 <a href="../basic_init/scroll_xy.html">Both</a> /
 648                                                 <a href="../basic_init/scroll_y_theme.html">Themed</a> /
 649                                                 <a href="../basic_init/scroll_y_infinite.html">Infinite</a>
 650                                         </li>
 651                                         <li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
 652                                         <li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
 653                                 </ul>
 654
 655                                 <h2>Advanced initialisation</h2>
 656                                 <ul>
 657                                         <li>Events: <br>
 658                                                 <a href="../advanced_init/events_live.html">Live events</a> /
 659                                                 <a href="../advanced_init/events_pre_init.html">Pre-init</a> /
 660                                                 <a href="../advanced_init/events_post_init.html">Post-init</a>
 661                                         </li>
 662                                         <li><a href="../advanced_init/column_render.html">Column rendering</a></li>
 663                                         <li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
 664                                         <li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
 665                                         <li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
 666                                         <li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
 667                                         <li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
 668                                         <li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
 669                                         <li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
 670                                         <li><a href="../advanced_init/row_callback.html">Row callback</a></li>
 671                                         <li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
 672                                         <li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
 673                                         <li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
 674                                         <li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
 675                                         <li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
 676                                         <li><a href="../advanced_init/dt_events.html">Custom events</a></li>
 677                                 </ul>
 678
 679                                 <h2>API</h2>
 680                                 <ul>
 681                                         <li><a href="../api/add_row.html">Dynamically add a new row</a></li>
 682                                         <li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
 683                                         <li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
 684                                         <li><a href="../api/highlight.html">Highlight rows and columns</a></li>
 685                                         <li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
 686                                         <li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
 687                                         <li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
 688                                         <li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
 689                                         <li><a href="../api/form.html">Submit form with elements in table</a></li>
 690                                         <li><a href="../api/counter_column.html">Index column (static number column)</a></li>
 691                                         <li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
 692                                         <li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
 693                                         <li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
 694                                         <li><a href="../api/regex.html">Regular expression filtering</a></li>
 695                                 </ul>
 696                         </div>
 697
 698                         <div class="demo_links">
 699                                 <h2>Data sources</h2>
 700                                 <ul>
 701                                         <li><a href="../data_sources/dom.html">DOM</a></li>
 702                                         <li><a href="../data_sources/js_array.html">Javascript array</a></li>
 703                                         <li><a href="../data_sources/ajax.html">Ajax source</a></li>
 704                                         <li><a href="../data_sources/server_side.html">Server side processing</a></li>
 705                                 </ul>
 706
 707                                 <h2>Server-side processing</h2>
 708                                 <ul>
 709                                         <li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
 710                                         <li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
 711                                         <li><a href="../server_side/post.html">Use HTTP POST</a></li>
 712                                         <li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
 713                                         <li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
 714                                         <li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
 715                                         <li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
 716                                         <li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
 717                                         <li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
 718                                         <li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
 719                                         <li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
 720                                 </ul>
 721
 722                                 <h2>Ajax data source</h2>
 723                                 <ul>
 724                                         <li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
 725                                         <li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
 726                                         <li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
 727                                         <li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
 728                                         <li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
 729                                         <li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
 730                                         <li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
 731                                 </ul>
 732
 733                                 <h2>Plug-ins</h2>
 734                                 <ul>
 735                                         <li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
 736                                         <li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
 737                                         <li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
 738                                         <li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
 739                                         <li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
 740                                         <li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
 741                                         <li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
 742                                 </ul>
 743                         </div>
 744
 745
 746                         <div id="footer" class="clear" style="text-align:center;">
 747                                 <p>
 748                                         Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
 749                                         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> which extend the capabilities of DataTables.
 750                                 </p>
 751
 752                                 <span style="font-size:10px;">
 753                                         DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
 754                                         DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
 755                                 </span>
 756                         </div>
 757                 </div>
 758         </body>
 759 </html>