rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2025-01-18 11:52:11 +01:00
Code Issues Releases Activity

Updated: Update examples and documentation for the change in committed

Browse Source 
in cdc6399 to make naming more consistent
This commit is contained in:
Allan Jardine 2013-11-12 19:18:51 +00:00
parent e1f0fd2dee
commit da8358ce48
90 changed files with 1076 additions and 1595 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.datatables-commit-sync
View File

@ -1 +1 @@
cdc63991a2fed2b9779076a45dfe03d0bad84963
72f440f125efda4868b280e1cf44c440e26cec00

18
examples/advanced_init/column_render.html
View File

@ -50,7 +50,7 @@ $(document).ready(function() {
"Initialisation option">columns.render</code></a> which can be used to process the content of each cell
before the data is used. <a href="//datatables.net/init/columns.render"><code class="option" title=
"Initialisation option">columns.render</code></a> has a wide array of options available to it for
rendering different types of data orthogonally (sorting, filtering, display etc), but it can be used
rendering different types of data orthogonally (ordering, searching, display etc), but it can be used
very simply to manipulate the content of a cell, as shown here.</p>
<p>This example shows the person's age combined with their name in the first column, hiding the age
@ -624,8 +624,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -659,7 +659,7 @@ $(document).ready(function() {
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -671,7 +671,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -746,10 +746,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

18
examples/advanced_init/complex_header.html
View File

@ -50,7 +50,7 @@ $(document).ready(function() {
the header correctly.</p>
<p>Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables
can use that cell to detect the column and use it to apply sorting.</p>
can use that cell to detect the column and use it to apply ordering.</p>
<p>The example below shows a header spanning multiple cells over the contact information, with one of
the columns that the span covers being hidden.</p>
@ -618,8 +618,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -654,7 +654,7 @@ $(document).ready(function() {
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -666,7 +666,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -741,10 +741,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

28
examples/advanced_init/defaults.html
View File

@ -19,8 +19,8 @@
$.extend( $.fn.dataTable.defaults, {
"filter": false,
"sort": false
"searching": false,
"ordering": false
} );
@ -46,8 +46,8 @@ $(document).ready(function() {
DataTables initialisation object, but in this case you are setting the default for all future
initialisations of DataTables.</p>
<p>This example shows the filtering and sorting features of DataTables being disabled by default, which
is reflected in the table when it is initialised.</p>
<p>This example shows the searching and ordering features of DataTables being disabled by default,
which is reflected in the table when it is initialised.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -545,8 +545,8 @@ $(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$.extend( $.fn.dataTable.defaults, {
&quot;filter&quot;: false,
&quot;sort&quot;: false
&quot;searching&quot;: false,
&quot;ordering&quot;: false
} );
@ -609,8 +609,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -644,7 +644,7 @@ $(document).ready(function() {
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -656,7 +656,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -731,10 +731,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

16
examples/advanced_init/dom_multiple_elements.html
View File

@ -615,8 +615,8 @@ div.dataTables_length {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -651,7 +651,7 @@ div.dataTables_length {
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -663,7 +663,7 @@ div.dataTables_length {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -738,10 +738,12 @@ div.dataTables_length {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

16
examples/advanced_init/dom_toolbar.html
View File

@ -620,8 +620,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -655,7 +655,7 @@ $(document).ready(function() {
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li class="active"><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -667,7 +667,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -742,10 +742,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

28
examples/advanced_init/dt_events.html
View File

@ -26,8 +26,8 @@ $(document).ready(function() {
}
$('#example')
.on( 'sort', function () { eventFired( 'Sort' ); } )
.on( 'filter', function () { eventFired( 'Filter' ); } )
.on( 'order', function () { eventFired( 'order' ); } )
.on( 'search', function () { eventFired( 'Filter' ); } )
.on( 'page', function () { eventFired( 'Page' ); } )
.dataTable();
} );
@ -46,8 +46,8 @@ $(document).ready(function() {
allowing your code to perform custom actions when these events occur.</p>
<p>This example shows the use of the <a href="//datatables.net/event/sort"><code class="event" title=
"Event">sort</code></a>, <a href="//datatables.net/event/filter"><code class="event" title=
"Event">filter</code></a> and <a href="//datatables.net/event/page"><code class="event" title=
"Event">sort</code></a>, <a href="//datatables.net/event/search"><code class="event" title=
"Event">search</code></a> and <a href="//datatables.net/event/page"><code class="event" title=
"Event">page</code></a> events by adding a notification that the event fired to an element on the page
to show that they have indeed fired.</p>
</div>
@ -556,8 +556,8 @@ $(document).ready(function() {
}
$('#example')
.on( 'sort', function () { eventFired( 'Sort' ); } )
.on( 'filter', function () { eventFired( 'Filter' ); } )
.on( 'order', function () { eventFired( 'order' ); } )
.on( 'search', function () { eventFired( 'Filter' ); } )
.on( 'page', function () { eventFired( 'Page' ); } )
.dataTable();
} );
@ -617,8 +617,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -652,7 +652,7 @@ $(document).ready(function() {
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -664,7 +664,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -739,10 +739,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

16
examples/advanced_init/events_live.html
View File

@ -604,8 +604,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -639,7 +639,7 @@ $(document).ready(function() {
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -651,7 +651,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -726,10 +726,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

16
examples/advanced_init/footer_callback.html
View File

@ -604,8 +604,8 @@ th { white-space: nowrap; }
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -639,7 +639,7 @@ th { white-space: nowrap; }
<li><a href="./row_grouping.html">Row grouping</a></li>
<li class="active"><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -651,7 +651,7 @@ th { white-space: nowrap; }
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -726,10 +726,12 @@ th { white-space: nowrap; }
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

35
examples/advanced_init/html5-data-attributes.html
View File

@ -32,28 +32,29 @@ $(document).ready(function() {
<h1>DataTables example <span>- HTML5 data-* attributes</span></h1>
<div class="info">
<p>DataTables can use different data for different actions (display, sorting and filtering) which can
<p>DataTables can use different data for different actions (display, ordering and searcgubg) which can
be immensely powerful for transforming data in the display to be intuitive for the end user, while
using different, or more complex data, for other actions. For example, if a table contains a formatted
telephone number in the format <code>xxx-xxxx</code>, intuitively a user might search for the number
but without a dash. Using orthogonal data for filtering allows both forms of the telephone number to be
but without a dash. Using orthogonal data for searching allows both forms of the telephone number to be
used, while only the nicely formatted number is displayed in the table.</p>
<p>One method in which DataTables can obtain this orthogonal data for its different actions is through
<a href=
"http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">
custom HTML5 data attributes</a>. DataTables will automatically detect two different attributes on the
custom HTML5 data attributes</a>. DataTables will automatically detect four different attributes on the
HTML elements:</p>
<ul>
<li><code>data-sort</code> - for sorting data</li>
<li><code>data-filter</code> - for filtering data</li>
<li><code>data-sort</code> or <code>data-order</code> - for ordering data</li>
<li><code>data-filter</code> or <code>data-search</code> - for search data</li>
</ul>
<p>This example shows both options. In this case the first column has been formatted so the first name
has abbreviated, but the full name is still searchable (search for "Bruno" for example). Additionally,
although the last column contains non-numeric data in it (<code>/m</code>) the column will correctly
sort numerically as the <code>data-sort</code> attribute is set on the column with plain numeric
<p>This example shows the use of <code>data-sort</code> and <code>data-filter</code> attributes. In
this case the first column has been formatted so the first name has abbreviated, but the full name is
still searchable (search for "Bruno" for example). Additionally, although the last column contains
non-numeric data in it (<code>/m</code>) the column will correctly order numerically as the
<code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric
data.</p>
</div>
@ -610,8 +611,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -645,7 +646,7 @@ $(document).ready(function() {
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -657,7 +658,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -732,10 +733,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

2
examples/advanced_init/index.html
View File

@ -50,7 +50,7 @@
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
</div>

16
examples/advanced_init/language_file.html
View File

@ -602,8 +602,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -637,7 +637,7 @@ $(document).ready(function() {
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -649,7 +649,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -724,10 +724,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

16
examples/advanced_init/length_menu.html
View File

@ -604,8 +604,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -639,7 +639,7 @@ $(document).ready(function() {
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -651,7 +651,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -726,10 +726,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

16
examples/advanced_init/row_callback.html
View File

@ -618,8 +618,8 @@ td.highlight {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -653,7 +653,7 @@ td.highlight {
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -665,7 +665,7 @@ td.highlight {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -740,10 +740,12 @@ td.highlight {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

28
examples/advanced_init/row_grouping.html
View File

@ -28,7 +28,7 @@ $(document).ready(function() {
"columnDefs": [
{ "visible": false, "targets": 2 }
],
"sorting": [[ 2, 'asc' ]],
"order": [[ 2, 'asc' ]],
"displayLength": 25,
"drawCallback": function ( settings ) {
var api = this.api();
@ -47,7 +47,7 @@ $(document).ready(function() {
}
} );
// Sort by the grouping
// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
@ -78,8 +78,8 @@ $(document).ready(function() {
"//datatables.net/init/drawCallback"><code class="option" title=
"Initialisation option">drawCallback</code></a> function, which will parse through the rows which are
displayed, and enter a grouping TR element where a new group is found. A <code>click</code> event
handler is added for the grouping rows to allow the grouping sort to be restored as well as sorting by
any other column.</p>
handler is added for the grouping rows to allow the grouping order to be restored as well as ordering
by any other column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -581,7 +581,7 @@ $(document).ready(function() {
&quot;columnDefs&quot;: [
{ &quot;visible&quot;: false, &quot;targets&quot;: 2 }
],
&quot;sorting&quot;: [[ 2, 'asc' ]],
&quot;order&quot;: [[ 2, 'asc' ]],
&quot;displayLength&quot;: 25,
&quot;drawCallback&quot;: function ( settings ) {
var api = this.api();
@ -600,7 +600,7 @@ $(document).ready(function() {
}
} );
// Sort by the grouping
// Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0];
if ( currentOrder[0] === 2 &amp;&amp; currentOrder[1] === 'asc' ) {
@ -670,8 +670,8 @@ tr.group:hover {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -705,7 +705,7 @@ tr.group:hover {
<li class="active"><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="./sort_direction_control.html">Sort direction control</a></li>
<li><a href="./sort_direction_control.html">Order direction sequence control</a></li>
</ul>
</div>
@ -717,7 +717,7 @@ tr.group:hover {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -792,10 +792,12 @@ tr.group:hover {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

61
examples/advanced_init/sort_direction_control.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<title>DataTables example - Sort direction control</title>
<title>DataTables example - Order direction sequence control</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
@ -23,9 +23,9 @@ $(document).ready(function() {
"aoColumns": [
null,
null,
{ "sorting": [ "asc" ] },
{ "sorting": [ "desc", "asc", "asc" ] },
{ "sorting": [ "desc" ] },
{ "orderSequence": [ "asc" ] },
{ "orderSequence": [ "desc", "asc", "asc" ] },
{ "orderSequence": [ "desc" ] },
null
]
} );
@ -38,30 +38,30 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Sort direction control</span></h1>
<h1>DataTables example <span>- Order direction sequence control</span></h1>
<div class="info">
<p>At times you may wish to change the default sorting direction for columns (some or all of them) to
be 'descending' rather than DataTables' default ascending. This can be done through the use of the
<a href="//datatables.net/init/columns.sorting"><code class="option" title=
"Initialisation option">columns.sorting</code></a> initialisation parameter. This parameter also allows
you to limit the sorting to a single direction, or you could add complex behaviour to the sorting
interaction.</p>
<p>At times you may wish to change the default ordering direction sequence for columns (some or all of
them) to be 'descending' rather than DataTables' default ascending. This can be done through the use of
the <a href="//datatables.net/init/columns.orderSequence"><code class="option" title=
"Initialisation option">columns.orderSequence</code></a> initialisation parameter. This parameter also
allows you to limit the ordering to a single direction, or you could add complex behaviour to the
ordering interaction.</p>
<p>The example below shows:</p>
<ul>
<li>Column 1 - default sorting</li>
<li>Column 2 - default sorting</li>
<li>Column 3 - ascending sorting only</li>
<li>Column 4 - descending sorting, followed by ascending and then ascending again</li>
<li>Column 5 - descending sorting only</li>
<li>Column 6 - default sorting</li>
<li>Column 1 - default ordering</li>
<li>Column 2 - default ordering</li>
<li>Column 3 - ascending ordering only</li>
<li>Column 4 - descending ordering, followed by ascending and then ascending again</li>
<li>Column 5 - descending ordering only</li>
<li>Column 6 - default ordering</li>
</ul>
<p>It's worth noting that I don't have a good use case for when you might what to mix such complex
sorting behaviour into a single table, but the example shows how these options can be use and therefore
applied across all columns.</p>
ordering behaviour into a single table, but the example shows how these options can be use and
therefore applied across all columns.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -563,9 +563,9 @@ $(document).ready(function() {
&quot;aoColumns&quot;: [
null,
null,
{ &quot;sorting&quot;: [ &quot;asc&quot; ] },
{ &quot;sorting&quot;: [ &quot;desc&quot;, &quot;asc&quot;, &quot;asc&quot; ] },
{ &quot;sorting&quot;: [ &quot;desc&quot; ] },
{ &quot;orderSequence&quot;: [ &quot;asc&quot; ] },
{ &quot;orderSequence&quot;: [ &quot;desc&quot;, &quot;asc&quot;, &quot;asc&quot; ] },
{ &quot;orderSequence&quot;: [ &quot;desc&quot; ] },
null
]
} );
@ -626,8 +626,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -661,7 +661,8 @@ $(document).ready(function() {
<li><a href="./row_grouping.html">Row grouping</a></li>
<li><a href="./footer_callback.html">Footer callback</a></li>
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
<li class="active"><a href="./sort_direction_control.html">Sort direction control</a></li>
<li class="active"><a href="./sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -673,7 +674,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -748,10 +749,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/ajax/custom_data_flat.html
View File

@ -174,8 +174,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -211,7 +211,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -223,7 +224,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -298,10 +299,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/ajax/custom_data_property.html
View File

@ -159,8 +159,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -196,7 +196,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -208,7 +209,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -284,10 +285,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/ajax/deep.html
View File

@ -178,8 +178,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -215,7 +215,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -227,7 +228,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -302,10 +303,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/ajax/defer_render.html
View File

@ -147,8 +147,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -184,7 +184,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -196,7 +197,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -271,10 +272,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

2
examples/ajax/index.html
View File

@ -17,7 +17,7 @@
<h1>DataTables example <span>- Ajax sourced data</span></h1>
<div class="info">
<p>DataTables can read data from a server via Ajax, while still performing filtering, sorting, paging
<p>DataTables can read data from a server via Ajax, while still performing searching, ordering, paging
etc on the client-side. This is done through use of the <a href=
"//datatables.net/init/ajax"><code class="option" title="Initialisation option">ajax</code></a> option,
which has a number of options to customise how the data is retrieved from the server.</p>

17
examples/ajax/null_data_source.html
View File

@ -174,8 +174,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -211,7 +211,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -223,7 +224,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -299,10 +300,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/ajax/objects.html
View File

@ -169,8 +169,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -206,7 +206,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -218,7 +219,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -293,10 +294,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/ajax/objects_subarrays.html
View File

@ -190,8 +190,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -227,7 +227,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -239,7 +240,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -314,10 +315,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/ajax/simple.html
View File

@ -160,8 +160,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -197,7 +197,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -209,7 +210,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -284,10 +285,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/api/add_row.html
View File

@ -170,8 +170,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -207,7 +207,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -219,7 +220,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -292,10 +293,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/api/api_in_init.html
View File

@ -620,8 +620,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -657,7 +657,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -669,7 +670,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -742,10 +743,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

43
examples/api/counter_columns.html
View File

@ -21,14 +21,14 @@
$(document).ready(function() {
var t = $('#example').DataTable( {
"columnDefs": [ {
"filterable": false,
"sortable": false,
"searchable": false,
"orderable": false,
"targets": 0
} ],
"sorting": [[ 1, 'asc' ]]
"order": [[ 1, 'asc' ]]
} );
t.on( 'sort filter', function () {
t.on( 'order search', function () {
t.column(0, {filter:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
@ -47,12 +47,14 @@ $(document).ready(function() {
<div class="info">
<p>A fairly common requirement for highly interactive tables which are displayed on the web is to have
a column which with a 'counter' for the row number. This column should not be sortable, and will change
dynamically as the sorting and filtering applied to the table is altered by the end user.</p>
dynamically as the ordering and searching applied to the table is altered by the end user.</p>
<p>This example shows how this can be achieved with DataTables, where the first column is the counter
column, and is updated when sorting or filtering occurs. This is done by listening for the
<code>sort</code> and <code>filter</code> events emitted by the table. When these events are detected
the <a href="//datatables.net/api/column%28%29.nodes%28%29"><code class="api" title=
column, and is updated when ordering or searching occurs. This is done by listening for the <a href=
"//datatables.net/event/order"><code class="event" title="Event">order</code></a> and <a href=
"//datatables.net/event/search"><code class="event" title="Event">search</code></a> events emitted by
the table. When these events are detected the <a href=
"//datatables.net/api/column%28%29.nodes%28%29"><code class="api" title=
"API method">column().nodes()</code></a> method is used to get the TD/TH nodes for the target column
and the <code>each()</code> helper function used to iterate over each, which have their contents
updated as needed. Note that the <code>filter</code> and <code>order</code> options are using in the
@ -557,14 +559,14 @@ $(document).ready(function() {
$(document).ready(function() {
var t = $('#example').DataTable( {
&quot;columnDefs&quot;: [ {
&quot;filterable&quot;: false,
&quot;sortable&quot;: false,
&quot;searchable&quot;: false,
&quot;orderable&quot;: false,
&quot;targets&quot;: 0
} ],
&quot;sorting&quot;: [[ 1, 'asc' ]]
&quot;order&quot;: [[ 1, 'asc' ]]
} );
t.on( 'sort filter', function () {
t.on( 'order search', function () {
t.column(0, {filter:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
@ -626,8 +628,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -663,7 +665,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -675,7 +678,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -748,10 +751,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

25
examples/api/form.html
View File

@ -41,16 +41,16 @@ $(document).ready(function() {
<h1>DataTables example <span>- Form inputs</span></h1>
<div class="info">
<p>In order to perform paging, sorting, filter etc, DataTables can remove rows and cells from the
<p>In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the
document (i.e. those rows / cells which are not needed are not inserted into the document). This
increases performance and compatibility, however, it means that submitting forms which span multiple
pages requires a little bit of additional work to get the information that is not in the document any
longer.</p>
<p>The <a href="//datatables.net/api/%24%28%29"><code class="api" title="API method">$()</code></a>
method can be used to get nodes from the document regardless of paging, sorting etc. This example shows
<a href="//datatables.net/api/%24%28%29"><code class="api" title="API method">$()</code></a> being used
to get all <code class="tag" title="HTML tag">input</code> elements from the table.</p>
method can be used to get nodes from the document regardless of paging, ordering etc. This example
shows <a href="//datatables.net/api/%24%28%29"><code class="api" title="API method">$()</code></a>
being used to get all <code class="tag" title="HTML tag">input</code> elements from the table.</p>
<p>In the example a simple <code>alert()</code> is used to show the information from the form, but an
Ajax call to the server with the form data could easily be performed.</p>
@ -1686,8 +1686,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -1723,7 +1723,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -1735,7 +1736,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -1808,10 +1809,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

19
examples/api/highlight.html
View File

@ -66,7 +66,7 @@ $(document).ready(function() {
class, respectively.</p>
</div>
<table id="example" class="row-border hover sort-column" cellspacing="0" width="100%">
<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
@ -635,8 +635,8 @@ td.highlight {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -672,7 +672,8 @@ td.highlight {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -684,7 +685,7 @@ td.highlight {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -757,10 +758,12 @@ td.highlight {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/api/multi_filter.html
View File

@ -638,8 +638,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -675,7 +675,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -687,7 +688,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -761,10 +762,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/api/multi_filter_select.html
View File

@ -630,8 +630,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -667,7 +667,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -679,7 +680,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -752,10 +753,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/api/regex.html
View File

@ -715,8 +715,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -752,7 +752,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -764,7 +765,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -837,10 +838,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

25
examples/api/row_details.html
View File

@ -51,7 +51,7 @@ $(document).ready(function() {
"columns": [
{
"class": 'details-control',
"sortable": false,
"orderable": false,
"data": null,
"defaultContent": ''
},
@ -60,7 +60,7 @@ $(document).ready(function() {
{ "data": "office" },
{ "data": "salary" }
],
"sorting": [[1, 'asc']]
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
@ -164,7 +164,7 @@ $(document).ready(function() {
&quot;columns&quot;: [
{
&quot;class&quot;: 'details-control',
&quot;sortable&quot;: false,
&quot;orderable&quot;: false,
&quot;data&quot;: null,
&quot;defaultContent&quot;: ''
},
@ -173,7 +173,7 @@ $(document).ready(function() {
{ &quot;data&quot;: &quot;office&quot; },
{ &quot;data&quot;: &quot;salary&quot; }
],
&quot;sorting&quot;: [[1, 'asc']]
&quot;order&quot;: [[1, 'asc']]
} );
// Add event listener for opening and closing details
@ -255,8 +255,8 @@ tr.details td.details-control {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -292,7 +292,8 @@ tr.details td.details-control {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -304,7 +305,7 @@ tr.details td.details-control {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -378,10 +379,12 @@ tr.details td.details-control {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/api/select_row.html
View File

@ -613,8 +613,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -650,7 +650,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -662,7 +663,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -735,10 +736,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/api/select_single_row.html
View File

@ -629,8 +629,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -666,7 +666,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -678,7 +679,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -752,10 +753,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

21
examples/api/show_hide.html
View File

@ -21,7 +21,7 @@
$(document).ready(function() {
var table = $('#example').DataTable( {
"scrollY": "200px",
"paginate": false
"paging": false
} );
$('a.toggle-vis').on( 'click', function (e) {
@ -566,7 +566,7 @@ $(document).ready(function() {
$(document).ready(function() {
var table = $('#example').DataTable( {
&quot;scrollY&quot;: &quot;200px&quot;,
&quot;paginate&quot;: false
&quot;paging&quot;: false
} );
$('a.toggle-vis').on( 'click', function (e) {
@ -635,8 +635,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -672,7 +672,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -684,7 +685,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -757,10 +758,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

21
examples/api/tabs_and_scrolling.html
View File

@ -30,7 +30,7 @@ $(document).ready(function() {
$('table.display').dataTable( {
"scrollY": "200px",
"scrollCollapse": true,
"paginate": false,
"paging": false,
"jQueryUI": true
} );
} );
@ -566,7 +566,7 @@ $(document).ready(function() {
$('table.display').dataTable( {
&quot;scrollY&quot;: &quot;200px&quot;,
&quot;scrollCollapse&quot;: true,
&quot;paginate&quot;: false,
&quot;paging&quot;: false,
&quot;jQueryUI&quot;: true
} );
} );
@ -630,8 +630,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -667,7 +667,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -679,7 +680,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -753,10 +754,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

25
examples/basic_init/alt_pagination.html
View File

@ -19,7 +19,7 @@
$(document).ready(function() {
$('#example').dataTable( {
"paginationType": "full_numbers"
"pagingType": "full_numbers"
} );
} );
@ -35,8 +35,8 @@ $(document).ready(function() {
<p>The default page control presented by DataTables (forward and backward buttons with up to 7 page
numbers in-between) is fine for most situations, but there are cases where you may wish to customise
the options presented to the end user. This is done through DataTables' extensible pagination
mechanism, the <a href="//datatables.net/init/paginationType"><code class="option" title=
"Initialisation option">paginationType</code></a> option.</p>
mechanism, the <a href="//datatables.net/init/pagingType"><code class="option" title=
"Initialisation option">pagingType</code></a> option.</p>
<p>There are four built-in options for which pagination controls DataTables should show:</p>
@ -560,7 +560,7 @@ $(document).ready(function() {
<pre class="brush: js;">
$(document).ready(function() {
$('#example').dataTable( {
&quot;paginationType&quot;: &quot;full_numbers&quot;
&quot;pagingType&quot;: &quot;full_numbers&quot;
} );
} );
</pre>
@ -619,8 +619,8 @@ $(document).ready(function() {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -654,7 +654,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -666,7 +667,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -741,10 +742,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

25
examples/basic_init/complex_header.html
View File

@ -32,12 +32,12 @@ $(document).ready(function() {
<div class="info">
<p>When using tables to display data, you will often wish to display column information in groups.
DataTables fully supports <code>colspan</code> and <code>rowspan</code> in the table's header,
assigning the required sort listeners to the TH element suitable for that column.</p>
assigning the required order listeners to the TH element suitable for that column.</p>
<p>Each column must have one TH cell which is unique to it for the listeners to be added. By default
DataTables will use the bottom unique cell for the column to attach the sort listener, if more than one
cell for a column if found. The <a href="//datatables.net/init/sortCellsTop"><code class="option"
title="Initialisation option">sortCellsTop</code></a> option can be used to tell DataTables to use the
DataTables will use the bottom unique cell for the column to attach the irder listener, if more than
one cell for a column if found. The <a href="//datatables.net/init/orderCellsTop"><code class="option"
title="Initialisation option">orderCellsTop</code></a> option can be used to tell DataTables to use the
top cell if you prefer.</p>
<p>The example shown below has two sets of grouped information, grouped by colspan in the header.</p>
@ -600,8 +600,8 @@ $(document).ready(function() {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li class="active"><a href="./complex_header.html">Complex headers (rowspan and
@ -636,7 +636,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -648,7 +649,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -723,10 +724,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/basic_init/dom.html
View File

@ -664,8 +664,8 @@ $(document).ready(function() {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -699,7 +699,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -711,7 +712,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -786,10 +787,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

25
examples/basic_init/filter_only.html
View File

@ -19,8 +19,8 @@
$(document).ready(function() {
$('#example').dataTable( {
"paginate": false,
"sort": false,
"paging": false,
"ordering": false,
"info": false
} );
} );
@ -535,8 +535,8 @@ $(document).ready(function() {
<pre class="brush: js;">
$(document).ready(function() {
$('#example').dataTable( {
&quot;paginate&quot;: false,
&quot;sort&quot;: false,
&quot;paging&quot;: false,
&quot;ordering&quot;: false,
&quot;info&quot;: false
} );
} );
@ -596,8 +596,8 @@ $(document).ready(function() {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li class="active"><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -631,7 +631,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -643,7 +644,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -718,10 +719,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/basic_init/flexible_width.html
View File

@ -599,8 +599,8 @@ div.container {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -634,7 +634,8 @@ div.container {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -646,7 +647,7 @@ div.container {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -721,10 +722,12 @@ div.container {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/basic_init/hidden_columns.html
View File

@ -625,8 +625,8 @@ $(document).ready(function() {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li class="active"><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -660,7 +660,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -672,7 +673,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -747,10 +748,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

4
examples/basic_init/index.html
View File

@ -35,8 +35,8 @@
<ul class="toc">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>

17
examples/basic_init/language.html
View File

@ -606,8 +606,8 @@ $(document).ready(function() {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -641,7 +641,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -653,7 +654,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -728,10 +729,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

61
examples/basic_init/multi_col_sort.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<title>DataTables example - Multi-column sorting</title>
<title>DataTables example - Multi-column ordering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
@ -22,13 +22,13 @@ $(document).ready(function() {
$('#example').dataTable( {
columnDefs: [ {
targets: [ 0 ],
dataSort: [ 0, 1 ]
orderData: [ 0, 1 ]
}, {
targets: [ 1 ],
dataSort: [ 1, 0 ]
orderData: [ 1, 0 ]
}, {
targets: [ 4 ],
dataSort: [ 4, 0 ]
orderData: [ 4, 0 ]
} ]
} );
} );
@ -39,33 +39,33 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Multi-column sorting</span></h1>
<h1>DataTables example <span>- Multi-column ordering</span></h1>
<div class="info">
<p>DataTables allows sorting by multiple columns at the same time, which can be activated in a number
<p>DataTables allows ordering by multiple columns at the same time, which can be activated in a number
of different ways:</p>
<ul>
<li>User shift click on a column (added the clicked column as a secondary, tertiary etc sorting
<li>User shift click on a column (added the clicked column as a secondary, tertiary etc ordering
column).</li>
<li>On a per-column basis (i.e. sort by a specific column and then a secondary column if the data
<li>On a per-column basis (i.e. order by a specific column and then a secondary column if the data
in the first column is identical), through the <a href=
"//datatables.net/init/dataSort"><code class="option" title=
"Initialisation option">dataSort</code></a> option.</li>
<li>Using the <a href="//datatables.net/init/sorting"><code class="option" title=
"Initialisation option">sorting</code></a> option to specify a multiple column sort by default (for
example <code>[ [0,'asc'], [1,'asc'] ]</code>).</li>
"//datatables.net/init/orderData"><code class="option" title=
"Initialisation option">orderData</code></a> option.</li>
<li>Using the <a href="//datatables.net/init/orderData"><code class="option" title=
"Initialisation option">orderData</code></a> option to specify a multiple column order by default
(for example <code>[ [0,'asc'], [1,'asc'] ]</code>).</li>
<li>Through the <a href="//datatables.net/api/order%28%29"><code class="api" title=
"API method">order()</code></a> API method.</li>
</ul>
<p>Note that, the ability for the user to shift click to sort multiple columns can be disabled through
the <a href="//datatables.net/init/sortMulti"><code class="option" title=
"Initialisation option">sortMulti</code></a> option.</p>
<p>Note that, the ability for the user to shift click to order multiple columns can be disabled through
the <a href="//datatables.net/init/orderMutli"><code class="option" title=
"Initialisation option">orderMutli</code></a> option.</p>
<p>The example below shows the first column having a secondary sort applied to the second column in the
table, vice-versa for the second column being tied directly to the first and the salary column to the
first name column.</p>
<p>The example below shows the first column having a secondary order applied to the second column in
the table, vice-versa for the second column being tied directly to the first and the salary column to
the first name column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -497,13 +497,13 @@ $(document).ready(function() {
$('#example').dataTable( {
columnDefs: [ {
targets: [ 0 ],
dataSort: [ 0, 1 ]
orderData: [ 0, 1 ]
}, {
targets: [ 1 ],
dataSort: [ 1, 0 ]
orderData: [ 1, 0 ]
}, {
targets: [ 4 ],
dataSort: [ 4, 0 ]
orderData: [ 4, 0 ]
} ]
} );
} );
@ -563,8 +563,8 @@ $(document).ready(function() {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li class="active"><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li class="active"><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -598,7 +598,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -610,7 +611,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -685,10 +686,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/basic_init/multiple_tables.html
View File

@ -394,8 +394,8 @@ div.dataTables_wrapper {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li class="active"><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -429,7 +429,8 @@ div.dataTables_wrapper {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -441,7 +442,7 @@ div.dataTables_wrapper {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -516,10 +517,12 @@ div.dataTables_wrapper {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/basic_init/scroll_x.html
View File

@ -773,8 +773,8 @@ th, td { white-space: nowrap; }
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -808,7 +808,8 @@ th, td { white-space: nowrap; }
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -820,7 +821,7 @@ th, td { white-space: nowrap; }
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -895,10 +896,12 @@ th, td { white-space: nowrap; }
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/basic_init/scroll_xy.html
View File

@ -766,8 +766,8 @@ th, td { white-space: nowrap; }
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -801,7 +801,8 @@ th, td { white-space: nowrap; }
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -813,7 +814,7 @@ th, td { white-space: nowrap; }
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -888,10 +889,12 @@ th, td { white-space: nowrap; }
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

21
examples/basic_init/scroll_y.html
View File

@ -21,7 +21,7 @@ $(document).ready(function() {
$('#example').dataTable( {
"scrollY": "200px",
"scrollCollapse": true,
"paginate": false
"paging": false
} );
} );
@ -549,7 +549,7 @@ $(document).ready(function() {
$('#example').dataTable( {
&quot;scrollY&quot;: &quot;200px&quot;,
&quot;scrollCollapse&quot;: true,
&quot;paginate&quot;: false
&quot;paging&quot;: false
} );
} );
</pre>
@ -608,8 +608,8 @@ $(document).ready(function() {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -643,7 +643,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -655,7 +656,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -730,10 +731,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/basic_init/scroll_y_theme.html
View File

@ -598,8 +598,8 @@ $(document).ready(function() {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -634,7 +634,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -646,7 +647,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -721,10 +722,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

19
examples/basic_init/state_save.html
View File

@ -30,7 +30,7 @@ $('#example').dataTable( {
<h1>DataTables example <span>- State saving</span></h1>
<div class="info">
<p>DataTables has the option of being able to save the state of a table (its paging position, sorting
<p>DataTables has the option of being able to save the state of a table (its paging position, ordering
state etc) so that is can be restored when the user reloads a page, or comes back to the page after
visiting a sub-page. This state saving ability is enabled by the <a href=
"//datatables.net/init/stateSave"><code class="option" title=
@ -608,8 +608,8 @@ $('#example').dataTable( {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -643,7 +643,8 @@ $('#example').dataTable( {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -655,7 +656,7 @@ $('#example').dataTable( {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -730,10 +731,12 @@ $('#example').dataTable( {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

47
examples/basic_init/table_sorting.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<title>DataTables example - Default sorting</title>
<title>DataTables example - Default ordering (sorting)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
@ -19,7 +19,7 @@
$(document).ready(function() {
$('#example').dataTable( {
"sorting": [[ 3, "desc" ]]
"order": [[ 3, "desc" ]]
} );
} );
@ -29,23 +29,23 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Default sorting</span></h1>
<h1>DataTables example <span>- Default ordering (sorting)</span></h1>
<div class="info">
<p>With DataTables you can alter the sorting characteristics of the table at initialisation time. Using
the <a href="//datatables.net/init/sorting"><code class="option" title=
"Initialisation option">sorting</code></a> initialisation parameter, you can set the table to display
the data in exactly the order that you want.</p>
<p>With DataTables you can alter the ordering characteristics of the table at initialisation time.
Using the <a href="//datatables.net/init/order"><code class="option" title=
"Initialisation option">order</code></a> initialisation parameter, you can set the table to display the
data in exactly the order that you want.</p>
<p>The <a href="//datatables.net/init/sorting"><code class="option" title=
"Initialisation option">sorting</code></a> parameter is an array of arrays where the first value of the
inner array is the column to sort on, and the second is <code class="string" title=
"String">'asc'</code> (ascending sorting) or <code class="string" title="String">'desc'</code>
(descending sorting) as required. <a href="//datatables.net/init/sorting"><code class="option" title=
"Initialisation option">sorting</code></a> is a 2D array to allow multi-column sorting to be
<p>The <a href="//datatables.net/init/order"><code class="option" title=
"Initialisation option">order</code></a> parameter is an array of arrays where the first value of the
inner array is the column to order on, and the second is <code class="string" title=
"String">'asc'</code> (ascending ordering) or <code class="string" title="String">'desc'</code>
(descending ordering) as required. <a href="//datatables.net/init/order"><code class="option" title=
"Initialisation option">order</code></a> is a 2D array to allow multi-column ordering to be
defined.</p>
<p>The table below is sorted (descending) by the Age column.</p>
<p>The table below is ordered (descending) by the Age column.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -544,7 +544,7 @@ $(document).ready(function() {
<pre class="brush: js;">
$(document).ready(function() {
$('#example').dataTable( {
&quot;sorting&quot;: [[ 3, &quot;desc&quot; ]]
&quot;order&quot;: [[ 3, &quot;desc&quot; ]]
} );
} );
</pre>
@ -603,8 +603,8 @@ $(document).ready(function() {
<ul class="toc active">
<li><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li class="active"><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li class="active"><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -638,7 +638,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -650,7 +651,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -725,10 +726,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

19
examples/basic_init/zero_configuration.html
View File

@ -35,7 +35,7 @@ $(document).ready(function() {
<p>DataTables has most features enabled by default, so all you need to do to use it with your own
tables is to call the construction function.</p>
<p>Filtering, sorting, paging etc goodness will be immediately added to the table, as shown in this
<p>Searching, ordering, paging etc goodness will be immediately added to the table, as shown in this
example.</p>
</div>
@ -592,8 +592,8 @@ $(document).ready(function() {
<ul class="toc active">
<li class="active"><a href="./zero_configuration.html">Zero configuration</a></li>
<li><a href="./filter_only.html">Feature enable / disable</a></li>
<li><a href="./table_sorting.html">Default sorting</a></li>
<li><a href="./multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="./multiple_tables.html">Multiple tables</a></li>
<li><a href="./hidden_columns.html">Hidden columns</a></li>
<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
@ -627,7 +627,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -639,7 +640,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -714,10 +715,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/data_sources/ajax.html
View File

@ -605,8 +605,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -642,7 +642,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -654,7 +655,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -729,10 +730,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

19
examples/data_sources/dom.html
View File

@ -33,7 +33,7 @@ $(document).ready(function() {
<div class="info">
<p>The foundation for DataTables is progressive enhancement, so it is very adept at reading table
information directly from the DOM. This example shows how easy it is to add filtering, sorting and
information directly from the DOM. This example shows how easy it is to add searching, ordering and
paging to your HTML table by initialising DataTables on it.</p>
</div>
@ -590,8 +590,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -627,7 +627,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -639,7 +640,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -714,10 +715,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/data_sources/js_array.html
View File

@ -256,8 +256,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -293,7 +293,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -305,7 +306,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -380,10 +381,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

19
examples/data_sources/server_side.html
View File

@ -36,7 +36,7 @@ $(document).ready(function() {
<div class="info">
<p>There are many ways to get your data into DataTables, and if you are working with seriously large
databases, you might want to consider using the server-side options that DataTables provides. With
server-side processing enabled, all paging, filtering, sorting actions that DataTables performs are
server-side processing enabled, all paging, searching, ordering actions that DataTables performs are
handed off to a server where an SQL engine (or similar) can perform these actions on the large data set
(after all, that's what the database engine is designed for!). As such, each draw of the table will
result in a new Ajax request being made to get the required data.</p>
@ -149,8 +149,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -186,7 +186,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -198,7 +199,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -273,10 +274,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

19
examples/plug-ins/api.html
View File

@ -65,8 +65,8 @@ $(document).ready(function() {
the <a href="//datatables.net/api/column%28%29"><code class="api" title=
"API method">column()</code></a> method and the options for its selectors.</p>
<p>For more information about sorting plug-ins; creating them and their requirements, please refer to
the plug-in development documentation.</p>
<p>For more information about API plug-ins; creating them and their requirements, please refer to the
plug-in development documentation.</p>
</div>
<div id="demo">
@ -644,8 +644,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -681,7 +681,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -693,7 +694,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -768,10 +769,10 @@ $(document).ready(function() {
<h3><a href="./index.html">Plug-ins</a></h3>
<ul class="toc active">
<li class="active"><a href="./api.html">API plug-in methods</a></li>
<li><a href="./sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="./sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="./range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="./dom_sort.html">Live DOM sorting</a></li>
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

63
examples/plug-ins/dom_sort.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<title>DataTables example - Live DOM sorting</title>
<title>DataTables example - Live DOM ordering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
@ -19,7 +19,7 @@
/* Create an array with the values of all the input boxes in a column */
$.fn.dataTable.ext.sort['dom-text'] = function ( settings, col )
$.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val();
@ -27,7 +27,7 @@ $.fn.dataTable.ext.sort['dom-text'] = function ( settings, col )
}
/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.sort['dom-select'] = function ( settings, col )
$.fn.dataTable.ext.order['dom-select'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('select', td).val();
@ -35,21 +35,21 @@ $.fn.dataTable.ext.sort['dom-select'] = function ( settings, col )
}
/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTable.ext.sort['dom-checkbox'] = function ( settings, col )
$.fn.dataTable.ext.order['dom-checkbox'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).prop('checked') ? '1' : '0';
} );
}
/* Initialise the table with the required column sorting data types */
/* Initialise the table with the required column ordering data types */
$(document).ready(function() {
$('#example').dataTable( {
"columns": [
null,
{ "sortDataType": "dom-text", "type": "numeric" },
{ "sortDataType": "dom-text" },
{ "sortDataType": "dom-select" }
{ "orderDataType": "dom-text", "type": "numeric" },
{ "orderDataType": "dom-text" },
{ "orderDataType": "dom-select" }
]
} );
} );
@ -61,23 +61,23 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Live DOM sorting</span></h1>
<h1>DataTables example <span>- Live DOM ordering</span></h1>
<div class="info">
<p>This example shows how you can use information available in the DOM to sort columns. Typically
DataTables will read information to be sorted during it's initialisation phase, and this will not be
updated based on user interaction, so sorting on columns which have, for example, form elements in
<p>This example shows how you can use information available in the DOM to order columns. Typically
DataTables will read information to be ordered during it's initialisation phase, and this will not be
updated based on user interaction, so ordering on columns which have, for example, form elements in
them, may not reflect the current value of the input. To overcome this problem, you must update the
data that DataTables will sort on, just prior to the sort. This method is much more efficient than
actually sorting using the DOM, since only one DOM query is needed for each cell to be sorted.</p>
data that DataTables will order on, just prior to the order. This method is much more efficient than
actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.</p>
<p>The example below shows the first two columns as normal text with sorting as you would expect. The
<p>The example below shows the first two columns as normal text with ordering as you would expect. The
following columns all have a form input element of different kinds, and the information contained
within is what DataTables will perform the sort on, based on the value at the time of the sort.</p>
within is what DataTables will perform the order on, based on the value at the time of the order.</p>
<p>This is a fairly simple example, but it you aren't constrained to just using form input elements,
you could use anything and customise your DOM queries to suit yourself. You could also update the
sorting live as a user in entered data into a form using an event handler calling <a href=
ordering live as a user in entered data into a form using an event handler calling <a href=
"//datatables.net/api/order%28%29"><code class="api" title="API method">order()</code></a> or <a href=
"//datatables.net/api/draw%28%29"><code class="api" title="API method">draw()</code></a> methods.</p>
</div>
@ -1645,7 +1645,7 @@ $(document).ready(function() {
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
/* Create an array with the values of all the input boxes in a column */
$.fn.dataTable.ext.sort['dom-text'] = function ( settings, col )
$.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).val();
@ -1653,7 +1653,7 @@ $.fn.dataTable.ext.sort['dom-text'] = function ( settings, col )
}
/* Create an array with the values of all the select options in a column */
$.fn.dataTable.ext.sort['dom-select'] = function ( settings, col )
$.fn.dataTable.ext.order['dom-select'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('select', td).val();
@ -1661,21 +1661,21 @@ $.fn.dataTable.ext.sort['dom-select'] = function ( settings, col )
}
/* Create an array with the values of all the checkboxes in a column */
$.fn.dataTable.ext.sort['dom-checkbox'] = function ( settings, col )
$.fn.dataTable.ext.order['dom-checkbox'] = function ( settings, col )
{
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
return $('input', td).prop('checked') ? '1' : '0';
} );
}
/* Initialise the table with the required column sorting data types */
/* Initialise the table with the required column ordering data types */
$(document).ready(function() {
$('#example').dataTable( {
&quot;columns&quot;: [
null,
{ &quot;sortDataType&quot;: &quot;dom-text&quot;, &quot;type&quot;: &quot;numeric&quot; },
{ &quot;sortDataType&quot;: &quot;dom-text&quot; },
{ &quot;sortDataType&quot;: &quot;dom-select&quot; }
{ &quot;orderDataType&quot;: &quot;dom-text&quot;, &quot;type&quot;: &quot;numeric&quot; },
{ &quot;orderDataType&quot;: &quot;dom-text&quot; },
{ &quot;orderDataType&quot;: &quot;dom-select&quot; }
]
} );
} );
@ -1735,8 +1735,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -1772,7 +1772,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -1784,7 +1785,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -1859,10 +1860,10 @@ $(document).ready(function() {
<h3><a href="./index.html">Plug-ins</a></h3>
<ul class="toc active">
<li><a href="./api.html">API plug-in methods</a></li>
<li><a href="./sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="./sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="./range_filtering.html">Custom filtering - range filter</a></li>
<li class="active"><a href="./dom_sort.html">Live DOM sorting</a></li>
<li class="active"><a href="./dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

8
examples/plug-ins/index.html
View File

@ -19,7 +19,7 @@
<div class="info">
<p>While DataTables has a wide range of options and data type support built in, it can never cater for
every type of data out of the box. For this reason, DataTables exposes an extension API which allows
you, the developers using DataTables, to add support for your own data types, filtering, sorting and
you, the developers using DataTables, to add support for your own data types, searching, ordering and
feature plug-ins.</p>
<p>The examples in this section show how plug-ins can be used and developed for DataTables.</p>
@ -37,10 +37,10 @@
<h3><a href="./index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="./api.html">API plug-in methods</a></li>
<li><a href="./sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="./sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="./range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="./dom_sort.html">Live DOM sorting</a></li>
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

15
examples/plug-ins/range_filtering.html
View File

@ -652,8 +652,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -689,7 +689,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -701,7 +702,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -776,11 +777,11 @@ $(document).ready(function() {
<h3><a href="./index.html">Plug-ins</a></h3>
<ul class="toc active">
<li><a href="./api.html">API plug-in methods</a></li>
<li><a href="./sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="./sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li class="active"><a href="./range_filtering.html">Custom filtering - range
filter</a></li>
<li><a href="./dom_sort.html">Live DOM sorting</a></li>
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

40
examples/plug-ins/sorting_auto.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<title>DataTables example - Sorting plug-ins (with type detection)</title>
<title>DataTables example - Ordering plug-ins (with type detection)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
@ -24,7 +24,7 @@ $.fn.dataTable.ext.type.detect.unshift(
}
);
$.fn.dataTable.ext.type.sort['numeric-comma-pre'] = function ( d ) {
$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
};
@ -40,23 +40,24 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Sorting plug-ins (with type detection)</span></h1>
<h1>DataTables example <span>- Ordering plug-ins (with type detection)</span></h1>
<div class="info">
<p>Although DataTables will sort a number of data types using the built in methods, When dealing with
more complex formatted data, it can be desirable to define the sorting order yourself. Using plug-in
sorting functions, you have have DataTables sort data in any manner you wish.</p>
<p>Although DataTables will automatically order data from a number of different data types using the
built in methods, When dealing with more complex formatted data, it can be desirable to define the
ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any
manner you wish.</p>
<p>Formatted data of a particular kind can be automatically detected and a suitable sorting plug-in
<p>Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in
assigned to it by making use of DataTables' plug-in type detection abilities. For complete information
about type detection and sorting plug-ins; creating them and their requirements, please refer to the
about type detection and ordering plug-ins; creating them and their requirements, please refer to the
plug-in development documentation.</p>
<p>This example shows sorting with a comma for a decimal place, as is often used in parts of Europe
<p>This example shows ordering with a comma for a decimal place, as is often used in parts of Europe
with automatic type detection.</p>
<p>A wide variety of ready made sorting plug-ins can be found on <a href=
"//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href=
"//datatables.net/plug-ins/order">the DataTables plug-ins page</a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -559,7 +560,7 @@ $.fn.dataTable.ext.type.detect.unshift(
}
);
$.fn.dataTable.ext.type.sort['numeric-comma-pre'] = function ( d ) {
$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
};
@ -623,8 +624,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -660,7 +661,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -672,7 +674,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -747,11 +749,11 @@ $(document).ready(function() {
<h3><a href="./index.html">Plug-ins</a></h3>
<ul class="toc active">
<li><a href="./api.html">API plug-in methods</a></li>
<li class="active"><a href="./sorting_auto.html">Sorting plug-ins (with type
<li class="active"><a href="./sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="./sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
<li><a href="./range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="./dom_sort.html">Live DOM sorting</a></li>
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

45
examples/plug-ins/sorting_manual.html
View File

@ -4,7 +4,7 @@
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<title>DataTables example - Sorting plug-ins (no type detection)</title>
<title>DataTables example - Ordering plug-ins (no type detection)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
@ -18,7 +18,7 @@
<script type="text/javascript" language="javascript" class="init">
$.fn.dataTable.ext.type.sort['numeric-comma-pre'] = function ( d ) {
$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
};
@ -38,25 +38,25 @@ $(document).ready(function() {
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Sorting plug-ins (no type detection)</span></h1>
<h1>DataTables example <span>- Ordering plug-ins (no type detection)</span></h1>
<div class="info">
<p>Although DataTables will sort a number of data types using the built in methods, When dealing with
more complex formatted data, it can be desirable to define the sorting order yourself. Using plug-in
sorting functions, you have have DataTables sort data in any manner you wish.</p>
<p>Although DataTables will order a number of data types using the built in methods, When dealing with
more complex formatted data, it can be desirable to define the ordering order yourself. Using plug-in
ordering functions, you have have DataTables order data in any manner you wish.</p>
<p>This is done by using the <a href="//datatables.net/init/columns.type"><code class="option" title=
"Initialisation option">columns.type</code></a> parameter, in combination with a sorting plug-in. The
sorting plug-in can be be of any level of complexity (natural sorting for example can be fairly complex
while also very powerful), and is defined by attaching to the <code>$.fn.dataTable.ext.type.sort</code>
object. For more information about sorting plug-ins; creating them and their requirements, please refer
to the plug-in development documentation.</p>
"Initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The
ordering plug-in can be be of any level of complexity (natural ordering for example can be fairly
complex while also very powerful), and is defined by attaching to the
<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins;
creating them and their requirements, please refer to the plug-in development documentation.</p>
<p>This example shows sorting with a comma for a decimal place, as is often used in parts of
<p>This example shows ordering with a comma for a decimal place, as is often used in parts of
Europe.</p>
<p>A wide variety of ready made sorting plug-ins can be found on <a href=
"//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href=
"//datatables.net/plug-ins/order">the DataTables plug-ins page</a>.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -553,7 +553,7 @@ $(document).ready(function() {
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$.fn.dataTable.ext.type.sort['numeric-comma-pre'] = function ( d ) {
$.fn.dataTable.ext.type.order['numeric-comma-pre'] = function ( d ) {
return parseFloat( d.replace(/,/g, '.') ) || 0;
};
@ -621,8 +621,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -658,7 +658,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -670,7 +671,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -745,11 +746,11 @@ $(document).ready(function() {
<h3><a href="./index.html">Plug-ins</a></h3>
<ul class="toc active">
<li><a href="./api.html">API plug-in methods</a></li>
<li><a href="./sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li class="active"><a href="./sorting_manual.html">Sorting plug-ins (no type
<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
<li class="active"><a href="./sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="./range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="./dom_sort.html">Live DOM sorting</a></li>
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/server_side/custom_vars.html
View File

@ -163,8 +163,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -200,7 +200,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -212,7 +213,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -286,10 +287,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

19
examples/server_side/defer_loading.html
View File

@ -51,7 +51,7 @@ $(document).ready(function() {
<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use
<a href="//datatables.net/init/deferLoading"><code class="option" title=
"Initialisation option">deferLoading</code></a> to tell DataTables that this data is available and that
it should wait for under interaction (sorting, paging etc) before making an Ajax call.</p>
it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
</div>
<table id="example" class="display" cellspacing="0" width="100%">
@ -234,8 +234,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -271,7 +271,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -283,7 +284,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -357,10 +358,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/server_side/ids.html
View File

@ -168,8 +168,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -205,7 +205,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -217,7 +218,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -291,10 +292,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

6
examples/server_side/index.html
View File

@ -19,9 +19,9 @@
<div class="info">
<p>There are many ways to get your data into DataTables, and if you are working with seriously large
databases, you might want to consider using the server-side options that DataTables provides. With
server-side processing enabled, all paging, filtering, sorting actions that DataTables performs are
handed off to a server where an SQL engine (or similar) can perform these actions on the large data set
(after all, that's what the database engine is designed for!). As such, each draw of the table will
server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs
are handed off to a server where an SQL engine (or similar) can perform these actions on the large data
set (after all, that's what the database engine is designed for!). As such, each draw of the table will
result in a new Ajax request being made to get the required data.</p>
<p>Server-side processing is enabled by setting the <a href=

17
examples/server_side/jsonp.html
View File

@ -157,8 +157,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -194,7 +194,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -206,7 +207,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -280,10 +281,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/server_side/object_data.html
View File

@ -159,8 +159,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -196,7 +196,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -208,7 +209,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -282,10 +283,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

31
examples/server_side/pipeline.html
View File

@ -44,11 +44,11 @@ $.fn.dataTable.pipeline = function ( opts ) {
// outside cached data - need to make a request
ajax = true;
}
else if ( JSON.stringify( request.sort ) !== JSON.stringify( cacheLastRequest.sort ) ||
else if ( JSON.stringify( request.order ) !== JSON.stringify( cacheLastRequest.order ) ||
JSON.stringify( request.columns ) !== JSON.stringify( cacheLastRequest.columns ) ||
JSON.stringify( request.filter ) !== JSON.stringify( cacheLastRequest.filter )
JSON.stringify( request.search ) !== JSON.stringify( cacheLastRequest.search )
) {
// properties changed (sorting, columns, filters)
// properties changed (ordering, columns, searching)
ajax = true;
}
@ -137,7 +137,7 @@ $(document).ready(function() {
data from the cache can be used.</p>
<p>Keep in mind that this caching is for paging only; the pipeline must be cleared for other
interactions such as sorting and filtering since the full data set, when using server-side processing,
interactions such as ordering and searching since the full data set, when using server-side processing,
is only available at the server.</p>
</div>
@ -202,11 +202,11 @@ $.fn.dataTable.pipeline = function ( opts ) {
// outside cached data - need to make a request
ajax = true;
}
else if ( JSON.stringify( request.sort ) !== JSON.stringify( cacheLastRequest.sort ) ||
else if ( JSON.stringify( request.order ) !== JSON.stringify( cacheLastRequest.order ) ||
JSON.stringify( request.columns ) !== JSON.stringify( cacheLastRequest.columns ) ||
JSON.stringify( request.filter ) !== JSON.stringify( cacheLastRequest.filter )
JSON.stringify( request.search ) !== JSON.stringify( cacheLastRequest.search )
) {
// properties changed (sorting, columns, filters)
// properties changed (ordering, columns, searching)
ajax = true;
}
@ -327,8 +327,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -364,7 +364,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -376,7 +377,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -451,10 +452,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/server_side/post.html
View File

@ -172,8 +172,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -209,7 +209,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -221,7 +222,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -295,10 +296,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

25
examples/server_side/row_details.html
View File

@ -40,7 +40,7 @@ $(document).ready(function() {
"columns": [
{
"class": "details-control",
"sortable": false,
"orderable": false,
"data": null,
"defaultContent": ""
},
@ -49,7 +49,7 @@ $(document).ready(function() {
{ "data": "position" },
{ "data": "office" }
],
"sorting": [[1, 'asc']]
"order": [[1, 'asc']]
} );
$('#example tbody').on('click', 'tr td:first-child', function () {
@ -146,7 +146,7 @@ $(document).ready(function() {
&quot;columns&quot;: [
{
&quot;class&quot;: &quot;details-control&quot;,
&quot;sortable&quot;: false,
&quot;orderable&quot;: false,
&quot;data&quot;: null,
&quot;defaultContent&quot;: &quot;&quot;
},
@ -155,7 +155,7 @@ $(document).ready(function() {
{ &quot;data&quot;: &quot;position&quot; },
{ &quot;data&quot;: &quot;office&quot; }
],
&quot;sorting&quot;: [[1, 'asc']]
&quot;order&quot;: [[1, 'asc']]
} );
$('#example tbody').on('click', 'tr td:first-child', function () {
@ -234,8 +234,8 @@ tr.details td.details-control {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -271,7 +271,8 @@ tr.details td.details-control {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -283,7 +284,7 @@ tr.details td.details-control {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -357,10 +358,12 @@ tr.details td.details-control {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

36
examples/server_side/scripts/ssp.class.php
View File

@ -51,20 +51,20 @@ class SSP {
{
$order = '';
if ( isset($request['sort']) && count($request['sort']) ) {
if ( isset($request['order']) && count($request['order']) ) {
$orderBy = array();
$dtColumns = SSP::pluck( $columns, 'dt' );
for ( $i=0, $ien=count($request['sort']) ; $i<$ien ; $i++ ) {
for ( $i=0, $ien=count($request['order']) ; $i<$ien ; $i++ ) {
// Convert the column index into the column data property
$columnIdx = intval($request['sort'][$i]['column']);
$columnIdx = intval($request['order'][$i]['column']);
$requestColumn = $request['columns'][$columnIdx];
$columnIdx = array_search( $requestColumn['data'], $dtColumns );
$column = $columns[ $columnIdx ];
if ( $requestColumn['sortable'] == 'true' ) {
$dir = $request['sort'][$i]['dir'] === 'asc' ?
if ( $requestColumn['orderable'] == 'true' ) {
$dir = $request['order'][$i]['dir'] === 'asc' ?
'ASC' :
'DESC';
@ -80,7 +80,7 @@ class SSP {
/**
* Filtering
* Searching / Filtering
*
* Construct the WHERE clause for server-side processing SQL query.
*
@ -96,12 +96,12 @@ class SSP {
*/
static function filter ( $request, $columns, &$bindings )
{
$globalFilter = array();
$columnFilter = array();
$globalSearch = array();
$columnSearch = array();
$dtColumns = SSP::pluck( $columns, 'dt' );
if ( isset($request['filter']) && $request['filter']['value'] != '' ) {
$str = $request['filter']['value'];
if ( isset($request['search']) && $request['search']['value'] != '' ) {
$str = $request['search']['value'];
for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i++ ) {
$requestColumn = $request['columns'][$i];
@ -110,7 +110,7 @@ class SSP {
if ( $requestColumn['searchable'] == 'true' ) {
$binding = SSP::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
$globalFilter[] = "`".$column['db']."` LIKE ".$binding;
$globalSearch[] = "`".$column['db']."` LIKE ".$binding;
}
}
}
@ -121,26 +121,26 @@ class SSP {
$columnIdx = array_search( $requestColumn['data'], $dtColumns );
$column = $columns[ $columnIdx ];
$str = $requestColumn['filter']['value'];
$str = $requestColumn['search']['value'];
if ( $requestColumn['searchable'] == 'true' &&
$str != '' ) {
$binding = SSP::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
$columnFilter[] = "`".$column['db']."` LIKE ".$binding;
$columnSearch[] = "`".$column['db']."` LIKE ".$binding;
}
}
// Combine the filters into a single string
$where = '';
if ( count( $globalFilter ) ) {
$where = '('.implode(' OR ', $globalFilter).')';
if ( count( $globalSearch ) ) {
$where = '('.implode(' OR ', $globalSearch).')';
}
if ( count( $columnFilter ) ) {
if ( count( $columnSearch ) ) {
$where = $where === '' ?
implode(' AND ', $globalFilter) :
$where .' AND '. implode(' AND ', $globalFilter);
implode(' AND ', $globalSearch) :
$where .' AND '. implode(' AND ', $globalSearch);
}
if ( $where !== '' ) {

17
examples/server_side/select_rows.html
View File

@ -185,8 +185,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -222,7 +222,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -234,7 +235,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -308,10 +309,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

23
examples/server_side/simple.html
View File

@ -36,9 +36,9 @@ $(document).ready(function() {
<div class="info">
<p>There are many ways to get your data into DataTables, and if you are working with seriously large
databases, you might want to consider using the server-side options that DataTables provides. With
server-side processing enabled, all paging, filtering, sorting actions that DataTables performs are
handed off to a server where an SQL engine (or similar) can perform these actions on the large data set
(after all, that's what the database engine is designed for!). As such, each draw of the table will
server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs
are handed off to a server where an SQL engine (or similar) can perform these actions on the large data
set (after all, that's what the database engine is designed for!). As such, each draw of the table will
result in a new Ajax request being made to get the required data.</p>
<p>Server-side processing is enabled by setting the <a href=
@ -149,8 +149,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -186,7 +186,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -198,7 +199,7 @@ $(document).ready(function() {
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
<li><a href="../styling/sort-column.html">Base style - sort-column</a></li>
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
@ -272,10 +273,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/styling/bootstrap.html
View File

@ -602,8 +602,8 @@ body { font-size: 140%; }
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -639,7 +639,8 @@ body { font-size: 140%; }
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -651,7 +652,7 @@ body { font-size: 140%; }
<li><a href="./row-border.html">Base style - row borders</a></li>
<li><a href="./cell-border.html">Base style - cell borders</a></li>
<li><a href="./hover.html">Base style - hover</a></li>
<li><a href="./sort-column.html">Base style - sort-column</a></li>
<li><a href="./order-column.html">Base style - order-column</a></li>
<li><a href="./stripe.html">Base style - stripe</a></li>
<li><a href="./jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li class="active"><a href="./bootstrap.html">Bootstrap</a></li>
@ -726,10 +727,12 @@ body { font-size: 140%; }
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/styling/cell-border.html
View File

@ -587,8 +587,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -624,7 +624,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -636,7 +637,7 @@ $(document).ready(function() {
<li><a href="./row-border.html">Base style - row borders</a></li>
<li class="active"><a href="./cell-border.html">Base style - cell borders</a></li>
<li><a href="./hover.html">Base style - hover</a></li>
<li><a href="./sort-column.html">Base style - sort-column</a></li>
<li><a href="./order-column.html">Base style - order-column</a></li>
<li><a href="./stripe.html">Base style - stripe</a></li>
<li><a href="./jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./bootstrap.html">Bootstrap</a></li>
@ -711,10 +712,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

22
examples/styling/display.html
View File

@ -38,14 +38,15 @@ $(document).ready(function() {
<li><code>cell-border</code> - Cells with a border</li>
<li><code>row-border</code> - Rows with a border (only one of <code>cell-border</code> and
<code>row-border</code> should be used for a single table.</li>
<li><code>sort-column</code> - Highlight the cells in the column currently being sorted upon</li>
<li><code>order-column</code> - Highlight the cells in the column currently being ordering
upon</li>
<li><code>hover</code> - Highlight a row when hovered over</li>
</ul>
<p>These classes can be combined (simply assign multiple classes to the table) to build up the styling
that you want for your table.</p>
<p>The <code>display</code> class is a short-cut for specifying the <code>stripe hover sort-column
<p>The <code>display</code> class is a short-cut for specifying the <code>stripe hover order-column
row-border</code> as the class name for a table. This is shown in the example below.</p>
</div>
@ -602,8 +603,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -639,7 +640,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -651,7 +653,7 @@ $(document).ready(function() {
<li><a href="./row-border.html">Base style - row borders</a></li>
<li><a href="./cell-border.html">Base style - cell borders</a></li>
<li><a href="./hover.html">Base style - hover</a></li>
<li><a href="./sort-column.html">Base style - sort-column</a></li>
<li><a href="./order-column.html">Base style - order-column</a></li>
<li><a href="./stripe.html">Base style - stripe</a></li>
<li><a href="./jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./bootstrap.html">Bootstrap</a></li>
@ -726,10 +728,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/styling/foundation.html
View File

@ -601,8 +601,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -638,7 +638,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -650,7 +651,7 @@ $(document).ready(function() {
<li><a href="./row-border.html">Base style - row borders</a></li>
<li><a href="./cell-border.html">Base style - cell borders</a></li>
<li><a href="./hover.html">Base style - hover</a></li>
<li><a href="./sort-column.html">Base style - sort-column</a></li>
<li><a href="./order-column.html">Base style - order-column</a></li>
<li><a href="./stripe.html">Base style - stripe</a></li>
<li><a href="./jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./bootstrap.html">Bootstrap</a></li>
@ -725,10 +726,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/styling/hover.html
View File

@ -587,8 +587,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -624,7 +624,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -636,7 +637,7 @@ $(document).ready(function() {
<li><a href="./row-border.html">Base style - row borders</a></li>
<li><a href="./cell-border.html">Base style - cell borders</a></li>
<li class="active"><a href="./hover.html">Base style - hover</a></li>
<li><a href="./sort-column.html">Base style - sort-column</a></li>
<li><a href="./order-column.html">Base style - order-column</a></li>
<li><a href="./stripe.html">Base style - stripe</a></li>
<li><a href="./jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./bootstrap.html">Bootstrap</a></li>
@ -711,10 +712,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

2
examples/styling/index.html
View File

@ -43,7 +43,7 @@
<li><a href="./row-border.html">Base style - row borders</a></li>
<li><a href="./cell-border.html">Base style - cell borders</a></li>
<li><a href="./hover.html">Base style - hover</a></li>
<li><a href="./sort-column.html">Base style - sort-column</a></li>
<li><a href="./order-column.html">Base style - order-column</a></li>
<li><a href="./stripe.html">Base style - stripe</a></li>
<li><a href="./jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./bootstrap.html">Bootstrap</a></li>

17
examples/styling/jqueryUI.html
View File

@ -602,8 +602,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -639,7 +639,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -651,7 +652,7 @@ $(document).ready(function() {
<li><a href="./row-border.html">Base style - row borders</a></li>
<li><a href="./cell-border.html">Base style - cell borders</a></li>
<li><a href="./hover.html">Base style - hover</a></li>
<li><a href="./sort-column.html">Base style - sort-column</a></li>
<li><a href="./order-column.html">Base style - order-column</a></li>
<li><a href="./stripe.html">Base style - stripe</a></li>
<li class="active"><a href="./jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./bootstrap.html">Bootstrap</a></li>
@ -726,10 +727,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/styling/no-classes.html
View File

@ -587,8 +587,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -624,7 +624,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -636,7 +637,7 @@ $(document).ready(function() {
<li><a href="./row-border.html">Base style - row borders</a></li>
<li><a href="./cell-border.html">Base style - cell borders</a></li>
<li><a href="./hover.html">Base style - hover</a></li>
<li><a href="./sort-column.html">Base style - sort-column</a></li>
<li><a href="./order-column.html">Base style - order-column</a></li>
<li><a href="./stripe.html">Base style - stripe</a></li>
<li><a href="./jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./bootstrap.html">Bootstrap</a></li>
@ -711,10 +712,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

17
examples/styling/row-border.html
View File

@ -587,8 +587,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -624,7 +624,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -636,7 +637,7 @@ $(document).ready(function() {
<li class="active"><a href="./row-border.html">Base style - row borders</a></li>
<li><a href="./cell-border.html">Base style - cell borders</a></li>
<li><a href="./hover.html">Base style - hover</a></li>
<li><a href="./sort-column.html">Base style - sort-column</a></li>
<li><a href="./order-column.html">Base style - order-column</a></li>
<li><a href="./stripe.html">Base style - stripe</a></li>
<li><a href="./jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./bootstrap.html">Bootstrap</a></li>
@ -711,10 +712,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

738
examples/styling/sort-column.html
View File

@ -1,738 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<title>DataTables example - Base style - sort-column</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>- Base style - sort-column</span></h1>
<div class="info">
<p>This example shows DataTables with just the <code>sort-column</code> class specified. Typically you
would want to use the <code>stripe</code> feature class in addition to <code>sort-column</code>
(possibly <code>hover</code> as well), but this example shows just the sorted column highlighting.</p>
</div>
<table id="example" class="sort-column" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$3,120</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Director</td>
<td>Edinburgh</td>
<td>63</td>
<td>2011/07/25</td>
<td>$5,300</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$4,800</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jenna Elliott</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>33</td>
<td>2008/11/28</td>
<td>$5,300</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$4,525</td>
</tr>
<tr>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>2012/08/06</td>
<td>$4,080</td>
</tr>
<tr>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>55</td>
<td>2010/10/14</td>
<td>$6,730</td>
</tr>
<tr>
<td>Colleen Hurst</td>
<td>Javascript Developer</td>
<td>San Francisco</td>
<td>39</td>
<td>2009/09/15</td>
<td>$5,000</td>
</tr>
<tr>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>2008/12/13</td>
<td>$3,600</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>System Architect</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>$5,000</td>
</tr>
<tr>
<td>Quinn Flynn</td>
<td>Financial Controller</td>
<td>Edinburgh</td>
<td>22</td>
<td>2013/03/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>2008/10/16</td>
<td>$5,300</td>
</tr>
<tr>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>2012/12/18</td>
<td>$4,800</td>
</tr>
<tr>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>2010/03/17</td>
<td>$2,875</td>
</tr>
<tr>
<td>Michael Silva</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>2012/11/27</td>
<td>$3,750</td>
</tr>
<tr>
<td>Paul Byrd</td>
<td>Javascript Developer</td>
<td>New York</td>
<td>64</td>
<td>2010/06/09</td>
<td>$5,000</td>
</tr>
<tr>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>2009/04/10</td>
<td>$3,120</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$3,120</td>
</tr>
<tr>
<td>Dai Rios</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>35</td>
<td>2012/09/26</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jenette Caldwell</td>
<td>Financial Controller</td>
<td>New York</td>
<td>30</td>
<td>2011/09/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Yuri Berry</td>
<td>System Architect</td>
<td>New York</td>
<td>40</td>
<td>2009/06/25</td>
<td>$3,600</td>
</tr>
<tr>
<td>Caesar Vance</td>
<td>Technical Author</td>
<td>New York</td>
<td>21</td>
<td>2011/12/12</td>
<td>$4,965</td>
</tr>
<tr>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Edinburgh</td>
<td>23</td>
<td>2010/09/20</td>
<td>$4,965</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>System Architect</td>
<td>London</td>
<td>36</td>
<td>2009/10/09</td>
<td>$2,875</td>
</tr>
<tr>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>2010/12/22</td>
<td>$4,525</td>
</tr>
<tr>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>London</td>
<td>28</td>
<td>2010/11/14</td>
<td>$4,080</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>18</td>
<td>2011/06/07</td>
<td>$3,750</td>
</tr>
<tr>
<td>Ebony Grimes</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>48</td>
<td>2010/03/11</td>
<td>$2,875</td>
</tr>
<tr>
<td>Russell Chavez</td>
<td>Director</td>
<td>Edinburgh</td>
<td>20</td>
<td>2011/08/14</td>
<td>$3,600</td>
</tr>
<tr>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>37</td>
<td>2011/06/02</td>
<td>$3,750</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>2009/10/22</td>
<td>$2,875</td>
</tr>
<tr>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>2011/05/07</td>
<td>$6,730</td>
</tr>
<tr>
<td>Gavin Cortez</td>
<td>Technical Author</td>
<td>San Francisco</td>
<td>22</td>
<td>2008/10/26</td>
<td>$6,730</td>
</tr>
<tr>
<td>Martena Mccray</td>
<td>Integration Specialist</td>
<td>Edinburgh</td>
<td>46</td>
<td>2011/03/09</td>
<td>$4,080</td>
</tr>
<tr>
<td>Unity Butler</td>
<td>Senior Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/12/09</td>
<td>$3,750</td>
</tr>
<tr>
<td>Howard Hatfield</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>51</td>
<td>2008/12/16</td>
<td>$4,080</td>
</tr>
<tr>
<td>Hope Fuentes</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>41</td>
<td>2010/02/12</td>
<td>$4,200</td>
</tr>
<tr>
<td>Vivian Harrell</td>
<td>System Architect</td>
<td>San Francisco</td>
<td>62</td>
<td>2009/02/14</td>
<td>$4,965</td>
</tr>
<tr>
<td>Timothy Mooney</td>
<td>Financial Controller</td>
<td>London</td>
<td>37</td>
<td>2008/12/11</td>
<td>$4,200</td>
</tr>
<tr>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>2008/09/26</td>
<td>$5,000</td>
</tr>
<tr>
<td>Miriam Weiss</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>64</td>
<td>2011/02/03</td>
<td>$4,965</td>
</tr>
<tr>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>2011/05/03</td>
<td>$4,200</td>
</tr>
<tr>
<td>Odessa Jackson</td>
<td>Support Engineer</td>
<td>Edinburgh</td>
<td>37</td>
<td>2009/08/19</td>
<td>$3,600</td>
</tr>
<tr>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>2013/08/11</td>
<td>$3,600</td>
</tr>
<tr>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>2009/07/07</td>
<td>$4,800</td>
</tr>
<tr>
<td>Elton Baldwin</td>
<td>Data Coordinator</td>
<td>Edinburgh</td>
<td>64</td>
<td>2012/04/09</td>
<td>$6,730</td>
</tr>
<tr>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>2010/01/04</td>
<td>$4,800</td>
</tr>
<tr>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>2012/06/01</td>
<td>$5,300</td>
</tr>
<tr>
<td>Jennifer Acosta</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>2013/02/01</td>
<td>$2,875</td>
</tr>
<tr>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>2011/12/06</td>
<td>$4,800</td>
</tr>
<tr>
<td>Hermione Butler</td>
<td>Director</td>
<td>London</td>
<td>47</td>
<td>2011/03/21</td>
<td>$4,080</td>
</tr>
<tr>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>2009/02/27</td>
<td>$3,120</td>
</tr>
<tr>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>2010/07/14</td>
<td>$5,300</td>
</tr>
<tr>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>2008/11/13</td>
<td>$5,300</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Edinburgh</td>
<td>29</td>
<td>2011/06/27</td>
<td>$4,080</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>System Architect</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$3,120</td>
</tr>
</tbody>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p>
<pre class="brush: js;">
$(document).ready(function() {
$('#example').dataTable();
} );
</pre>
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
below:</p>
<pre class="brush: js;">
</pre>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic Init</a></h3>
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced Init</a></h3>
<ul class="toc">
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
elements</a></li>
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
colspan)</a></li>
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Styling</a></h3>
<ul class="toc active">
<li><a href="./display.html">Base style</a></li>
<li><a href="./no-classes.html">Base style - no styling classes</a></li>
<li><a href="./row-border.html">Base style - row borders</a></li>
<li><a href="./cell-border.html">Base style - cell borders</a></li>
<li><a href="./hover.html">Base style - hover</a></li>
<li class="active"><a href="./sort-column.html">Base style - sort-column</a></li>
<li><a href="./stripe.html">Base style - stripe</a></li>
<li><a href="./jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./bootstrap.html">Bootstrap</a></li>
<li><a href="./foundation.html">Foundation</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data Sources</a></h3>
<ul class="toc">
<li><a href="../data_sources/dom.html">DOM sourced data</a></li>
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../server_side/index.html">Server Side</a></h3>
<ul class="toc">
<li><a href="../server_side/simple.html">Server-side processing</a></li>
<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
<li><a href="../server_side/post.html">POST data</a></li>
<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="../server_side/object_data.html">Object data source</a></li>
<li><a href="../server_side/row_details.html">Row details</a></li>
<li><a href="../server_side/select_rows.html">Row selection</a></li>
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">Api</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
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.</p>
<p class="copyright">DataTables designed and created by <a href=
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2013<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

17
examples/styling/stripe.html
View File

@ -586,8 +586,8 @@ $(document).ready(function() {
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
<li><a href="../basic_init/table_sorting.html">Default sorting</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
@ -623,7 +623,8 @@ $(document).ready(function() {
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Sort direction control</a></li>
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
</ul>
</div>
@ -635,7 +636,7 @@ $(document).ready(function() {
<li><a href="./row-border.html">Base style - row borders</a></li>
<li><a href="./cell-border.html">Base style - cell borders</a></li>
<li><a href="./hover.html">Base style - hover</a></li>
<li><a href="./sort-column.html">Base style - sort-column</a></li>
<li><a href="./order-column.html">Base style - order-column</a></li>
<li class="active"><a href="./stripe.html">Base style - stripe</a></li>
<li><a href="./jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="./bootstrap.html">Bootstrap</a></li>
@ -710,10 +711,12 @@ $(document).ready(function() {
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
<li><a href="../plug-ins/sorting_auto.html">Sorting plug-ins (with type detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Sorting plug-ins (no type detection)</a></li>
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range filter</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
</ul>
</div>
</div>

72
media/css/jquery.dataTables.css
View File

@ -117,96 +117,96 @@ table.dataTable.display tbody tr.odd:hover.selected,
table.dataTable.display tbody tr.even:hover.selected {
background-color: #a9b7d1;
}
table.dataTable.sort-column tbody tr > .sorting_1,
table.dataTable.sort-column tbody tr > .sorting_2,
table.dataTable.sort-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 {
background-color: #f9f9f9;
}
table.dataTable.sort-column tbody tr.selected > .sorting_1,
table.dataTable.sort-column tbody tr.selected > .sorting_2,
table.dataTable.sort-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_2,
table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.display tbody tr.selected > .sorting_2,
table.dataTable.display tbody tr.selected > .sorting_3 {
background-color: #acbad4;
}
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.sort-column.stripe tbody tr.odd > .sorting_1 {
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: #f1f1f1;
}
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.sort-column.stripe tbody tr.odd > .sorting_2 {
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
background-color: #f3f3f3;
}
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.sort-column.stripe tbody tr.odd > .sorting_3 {
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
background-color: whitesmoke;
}
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.sort-column.stripe tbody tr.odd.selected > .sorting_1 {
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
background-color: #a6b3cd;
}
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.sort-column.stripe tbody tr.odd.selected > .sorting_2 {
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
background-color: #a7b5ce;
}
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.sort-column.stripe tbody tr.odd.selected > .sorting_3 {
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
background-color: #a9b6d0;
}
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.sort-column.stripe tbody tr.even > .sorting_1 {
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
background-color: #f9f9f9;
}
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.sort-column.stripe tbody tr.even > .sorting_2 {
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
background-color: #fbfbfb;
}
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.sort-column.stripe tbody tr.even > .sorting_3 {
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
background-color: #fdfdfd;
}
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.sort-column.stripe tbody tr.even.selected > .sorting_1 {
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
background-color: #acbad4;
}
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.sort-column.stripe tbody tr.even.selected > .sorting_2 {
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
background-color: #adbbd6;
}
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.sort-column.stripe tbody tr.even.selected > .sorting_3 {
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
background-color: #afbdd8;
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.display tbody tr.odd:hover > .sorting_1,
table.dataTable.display tbody tr.even:hover > .sorting_1, table.dataTable.sort-column.hover tbody tr:hover > .sorting_1,
table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_1,
table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_1 {
table.dataTable.display tbody tr.even:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_1 {
background-color: #eaeaea;
}
table.dataTable.display tbody tr:hover > .sorting_2,
table.dataTable.display tbody tr.odd:hover > .sorting_2,
table.dataTable.display tbody tr.even:hover > .sorting_2, table.dataTable.sort-column.hover tbody tr:hover > .sorting_2,
table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_2,
table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_2 {
table.dataTable.display tbody tr.even:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_2,
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_2 {
background-color: #ebebeb;
}
table.dataTable.display tbody tr:hover > .sorting_3,
table.dataTable.display tbody tr.odd:hover > .sorting_3,
table.dataTable.display tbody tr.even:hover > .sorting_3, table.dataTable.sort-column.hover tbody tr:hover > .sorting_3,
table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_3,
table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_3 {
table.dataTable.display tbody tr.even:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_3,
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_3 {
background-color: #eeeeee;
}
table.dataTable.display tbody tr:hover.selected > .sorting_1,
table.dataTable.display tbody tr.odd:hover.selected > .sorting_1,
table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.sort-column.hover tbody tr:hover.selected > .sorting_1,
table.dataTable.sort-column.hover tbody tr.odd:hover.selected > .sorting_1,
table.dataTable.sort-column.hover tbody tr.even:hover.selected > .sorting_1 {
table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_1 {
background-color: #a1aec7;
}
table.dataTable.display tbody tr:hover.selected > .sorting_2,
table.dataTable.display tbody tr.odd:hover.selected > .sorting_2,
table.dataTable.display tbody tr.even:hover.selected > .sorting_2, table.dataTable.sort-column.hover tbody tr:hover.selected > .sorting_2,
table.dataTable.sort-column.hover tbody tr.odd:hover.selected > .sorting_2,
table.dataTable.sort-column.hover tbody tr.even:hover.selected > .sorting_2 {
table.dataTable.display tbody tr.even:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_2,
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_2 {
background-color: #a2afc8;
}
table.dataTable.display tbody tr:hover.selected > .sorting_3,
table.dataTable.display tbody tr.odd:hover.selected > .sorting_3,
table.dataTable.display tbody tr.even:hover.selected > .sorting_3, table.dataTable.sort-column.hover tbody tr:hover.selected > .sorting_3,
table.dataTable.sort-column.hover tbody tr.odd:hover.selected > .sorting_3,
table.dataTable.sort-column.hover tbody tr.even:hover.selected > .sorting_3 {
table.dataTable.display tbody tr.even:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_3,
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_3 {
background-color: #a4b2cb;
}

72
media/css/jquery.dataTables_themeroller.css
View File

@ -110,96 +110,96 @@ table.dataTable.display tbody tr.odd:hover.selected,
table.dataTable.display tbody tr.even:hover.selected {
background-color: #a9b7d1;
}
table.dataTable.sort-column tbody tr > .sorting_1,
table.dataTable.sort-column tbody tr > .sorting_2,
table.dataTable.sort-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3, table.dataTable.display tbody tr > .sorting_1,
table.dataTable.display tbody tr > .sorting_2,
table.dataTable.display tbody tr > .sorting_3 {
background-color: #f9f9f9;
}
table.dataTable.sort-column tbody tr.selected > .sorting_1,
table.dataTable.sort-column tbody tr.selected > .sorting_2,
table.dataTable.sort-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_1,
table.dataTable.order-column tbody tr.selected > .sorting_2,
table.dataTable.order-column tbody tr.selected > .sorting_3, table.dataTable.display tbody tr.selected > .sorting_1,
table.dataTable.display tbody tr.selected > .sorting_2,
table.dataTable.display tbody tr.selected > .sorting_3 {
background-color: #acbad4;
}
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.sort-column.stripe tbody tr.odd > .sorting_1 {
table.dataTable.display tbody tr.odd > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd > .sorting_1 {
background-color: #f1f1f1;
}
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.sort-column.stripe tbody tr.odd > .sorting_2 {
table.dataTable.display tbody tr.odd > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd > .sorting_2 {
background-color: #f3f3f3;
}
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.sort-column.stripe tbody tr.odd > .sorting_3 {
table.dataTable.display tbody tr.odd > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd > .sorting_3 {
background-color: whitesmoke;
}
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.sort-column.stripe tbody tr.odd.selected > .sorting_1 {
table.dataTable.display tbody tr.odd.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_1 {
background-color: #a6b3cd;
}
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.sort-column.stripe tbody tr.odd.selected > .sorting_2 {
table.dataTable.display tbody tr.odd.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_2 {
background-color: #a7b5ce;
}
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.sort-column.stripe tbody tr.odd.selected > .sorting_3 {
table.dataTable.display tbody tr.odd.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.odd.selected > .sorting_3 {
background-color: #a9b6d0;
}
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.sort-column.stripe tbody tr.even > .sorting_1 {
table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1 {
background-color: #f9f9f9;
}
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.sort-column.stripe tbody tr.even > .sorting_2 {
table.dataTable.display tbody tr.even > .sorting_2, table.dataTable.order-column.stripe tbody tr.even > .sorting_2 {
background-color: #fbfbfb;
}
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.sort-column.stripe tbody tr.even > .sorting_3 {
table.dataTable.display tbody tr.even > .sorting_3, table.dataTable.order-column.stripe tbody tr.even > .sorting_3 {
background-color: #fdfdfd;
}
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.sort-column.stripe tbody tr.even.selected > .sorting_1 {
table.dataTable.display tbody tr.even.selected > .sorting_1, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_1 {
background-color: #acbad4;
}
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.sort-column.stripe tbody tr.even.selected > .sorting_2 {
table.dataTable.display tbody tr.even.selected > .sorting_2, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_2 {
background-color: #adbbd6;
}
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.sort-column.stripe tbody tr.even.selected > .sorting_3 {
table.dataTable.display tbody tr.even.selected > .sorting_3, table.dataTable.order-column.stripe tbody tr.even.selected > .sorting_3 {
background-color: #afbdd8;
}
table.dataTable.display tbody tr:hover > .sorting_1,
table.dataTable.display tbody tr.odd:hover > .sorting_1,
table.dataTable.display tbody tr.even:hover > .sorting_1, table.dataTable.sort-column.hover tbody tr:hover > .sorting_1,
table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_1,
table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_1 {
table.dataTable.display tbody tr.even:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_1,
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_1 {
background-color: #eaeaea;
}
table.dataTable.display tbody tr:hover > .sorting_2,
table.dataTable.display tbody tr.odd:hover > .sorting_2,
table.dataTable.display tbody tr.even:hover > .sorting_2, table.dataTable.sort-column.hover tbody tr:hover > .sorting_2,
table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_2,
table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_2 {
table.dataTable.display tbody tr.even:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_2,
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_2 {
background-color: #ebebeb;
}
table.dataTable.display tbody tr:hover > .sorting_3,
table.dataTable.display tbody tr.odd:hover > .sorting_3,
table.dataTable.display tbody tr.even:hover > .sorting_3, table.dataTable.sort-column.hover tbody tr:hover > .sorting_3,
table.dataTable.sort-column.hover tbody tr.odd:hover > .sorting_3,
table.dataTable.sort-column.hover tbody tr.even:hover > .sorting_3 {
table.dataTable.display tbody tr.even:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3,
table.dataTable.order-column.hover tbody tr.odd:hover > .sorting_3,
table.dataTable.order-column.hover tbody tr.even:hover > .sorting_3 {
background-color: #eeeeee;
}
table.dataTable.display tbody tr:hover.selected > .sorting_1,
table.dataTable.display tbody tr.odd:hover.selected > .sorting_1,
table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.sort-column.hover tbody tr:hover.selected > .sorting_1,
table.dataTable.sort-column.hover tbody tr.odd:hover.selected > .sorting_1,
table.dataTable.sort-column.hover tbody tr.even:hover.selected > .sorting_1 {
table.dataTable.display tbody tr.even:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_1,
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_1 {
background-color: #a1aec7;
}
table.dataTable.display tbody tr:hover.selected > .sorting_2,
table.dataTable.display tbody tr.odd:hover.selected > .sorting_2,
table.dataTable.display tbody tr.even:hover.selected > .sorting_2, table.dataTable.sort-column.hover tbody tr:hover.selected > .sorting_2,
table.dataTable.sort-column.hover tbody tr.odd:hover.selected > .sorting_2,
table.dataTable.sort-column.hover tbody tr.even:hover.selected > .sorting_2 {
table.dataTable.display tbody tr.even:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_2,
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_2 {
background-color: #a2afc8;
}
table.dataTable.display tbody tr:hover.selected > .sorting_3,
table.dataTable.display tbody tr.odd:hover.selected > .sorting_3,
table.dataTable.display tbody tr.even:hover.selected > .sorting_3, table.dataTable.sort-column.hover tbody tr:hover.selected > .sorting_3,
table.dataTable.sort-column.hover tbody tr.odd:hover.selected > .sorting_3,
table.dataTable.sort-column.hover tbody tr.even:hover.selected > .sorting_3 {
table.dataTable.display tbody tr.even:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3,
table.dataTable.order-column.hover tbody tr.odd:hover.selected > .sorting_3,
table.dataTable.order-column.hover tbody tr.even:hover.selected > .sorting_3 {
background-color: #a4b2cb;
}