From da8358ce484c040b4df6b6efaa752303e4d609cc Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Tue, 12 Nov 2013 19:18:51 +0000 Subject: [PATCH] Updated: Update examples and documentation for the change in committed in cdc6399 to make naming more consistent --- .datatables-commit-sync | 2 +- examples/advanced_init/column_render.html | 18 +- examples/advanced_init/complex_header.html | 18 +- examples/advanced_init/defaults.html | 28 +- .../advanced_init/dom_multiple_elements.html | 16 +- examples/advanced_init/dom_toolbar.html | 16 +- examples/advanced_init/dt_events.html | 28 +- examples/advanced_init/events_live.html | 16 +- examples/advanced_init/footer_callback.html | 16 +- .../advanced_init/html5-data-attributes.html | 35 +- examples/advanced_init/index.html | 2 +- examples/advanced_init/language_file.html | 16 +- examples/advanced_init/length_menu.html | 16 +- examples/advanced_init/row_callback.html | 16 +- examples/advanced_init/row_grouping.html | 28 +- .../advanced_init/sort_direction_control.html | 61 +- examples/ajax/custom_data_flat.html | 17 +- examples/ajax/custom_data_property.html | 17 +- examples/ajax/deep.html | 17 +- examples/ajax/defer_render.html | 17 +- examples/ajax/index.html | 2 +- examples/ajax/null_data_source.html | 17 +- examples/ajax/objects.html | 17 +- examples/ajax/objects_subarrays.html | 17 +- examples/ajax/simple.html | 17 +- examples/api/add_row.html | 17 +- examples/api/api_in_init.html | 17 +- examples/api/counter_columns.html | 43 +- examples/api/form.html | 25 +- examples/api/highlight.html | 19 +- examples/api/multi_filter.html | 17 +- examples/api/multi_filter_select.html | 17 +- examples/api/regex.html | 17 +- examples/api/row_details.html | 25 +- examples/api/select_row.html | 17 +- examples/api/select_single_row.html | 17 +- examples/api/show_hide.html | 21 +- examples/api/tabs_and_scrolling.html | 21 +- examples/basic_init/alt_pagination.html | 25 +- examples/basic_init/complex_header.html | 25 +- examples/basic_init/dom.html | 17 +- examples/basic_init/filter_only.html | 25 +- examples/basic_init/flexible_width.html | 17 +- examples/basic_init/hidden_columns.html | 17 +- examples/basic_init/index.html | 4 +- examples/basic_init/language.html | 17 +- examples/basic_init/multi_col_sort.html | 61 +- examples/basic_init/multiple_tables.html | 17 +- examples/basic_init/scroll_x.html | 17 +- examples/basic_init/scroll_xy.html | 17 +- examples/basic_init/scroll_y.html | 21 +- examples/basic_init/scroll_y_theme.html | 17 +- examples/basic_init/state_save.html | 19 +- examples/basic_init/table_sorting.html | 47 +- examples/basic_init/zero_configuration.html | 19 +- examples/data_sources/ajax.html | 17 +- examples/data_sources/dom.html | 19 +- examples/data_sources/js_array.html | 17 +- examples/data_sources/server_side.html | 19 +- examples/plug-ins/api.html | 19 +- examples/plug-ins/dom_sort.html | 63 +- examples/plug-ins/index.html | 8 +- examples/plug-ins/range_filtering.html | 15 +- examples/plug-ins/sorting_auto.html | 40 +- examples/plug-ins/sorting_manual.html | 45 +- examples/server_side/custom_vars.html | 17 +- examples/server_side/defer_loading.html | 19 +- examples/server_side/ids.html | 17 +- examples/server_side/index.html | 6 +- examples/server_side/jsonp.html | 17 +- examples/server_side/object_data.html | 17 +- examples/server_side/pipeline.html | 31 +- examples/server_side/post.html | 17 +- examples/server_side/row_details.html | 25 +- examples/server_side/scripts/ssp.class.php | 36 +- examples/server_side/select_rows.html | 17 +- examples/server_side/simple.html | 23 +- examples/styling/bootstrap.html | 17 +- examples/styling/cell-border.html | 17 +- examples/styling/display.html | 22 +- examples/styling/foundation.html | 17 +- examples/styling/hover.html | 17 +- examples/styling/index.html | 2 +- examples/styling/jqueryUI.html | 17 +- examples/styling/no-classes.html | 17 +- examples/styling/row-border.html | 17 +- examples/styling/sort-column.html | 738 ------------------ examples/styling/stripe.html | 17 +- media/css/jquery.dataTables.css | 72 +- media/css/jquery.dataTables_themeroller.css | 72 +- 90 files changed, 1076 insertions(+), 1595 deletions(-) delete mode 100644 examples/styling/sort-column.html diff --git a/.datatables-commit-sync b/.datatables-commit-sync index b63c197c..07463f04 100644 --- a/.datatables-commit-sync +++ b/.datatables-commit-sync @@ -1 +1 @@ -cdc63991a2fed2b9779076a45dfe03d0bad84963 +72f440f125efda4868b280e1cf44c440e26cec00 diff --git a/examples/advanced_init/column_render.html b/examples/advanced_init/column_render.html index 0caacd7e..62187af4 100644 --- a/examples/advanced_init/column_render.html +++ b/examples/advanced_init/column_render.html @@ -50,7 +50,7 @@ $(document).ready(function() { "Initialisation option">columns.render which can be used to process the content of each cell before the data is used. columns.render 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.

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() {

@@ -671,7 +671,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -746,10 +746,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/advanced_init/complex_header.html b/examples/advanced_init/complex_header.html index 2c0737f0..d0128dfd 100644 --- a/examples/advanced_init/complex_header.html +++ b/examples/advanced_init/complex_header.html @@ -50,7 +50,7 @@ $(document).ready(function() { the header correctly.

    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.

    + can use that cell to detect the column and use it to apply ordering.

    The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden.

    @@ -618,8 +618,8 @@ $(document).ready(function() { @@ -666,7 +666,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -741,10 +741,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/advanced_init/defaults.html b/examples/advanced_init/defaults.html index bc62fd0c..a2904668 100644 --- a/examples/advanced_init/defaults.html +++ b/examples/advanced_init/defaults.html @@ -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.

    -

    This example shows the filtering and sorting features of DataTables being disabled by default, which - is reflected in the table when it is initialised.

    +

    This example shows the searching and ordering features of DataTables being disabled by default, + which is reflected in the table when it is initialised.

    @@ -545,8 +545,8 @@ $(document).ready(function() {

    The Javascript shown below is used to initialise the table shown in this example:

     $.extend( $.fn.dataTable.defaults, {
    -	"filter": false,
    -	"sort": false
    +	"searching": false,
    +	"ordering": false
     } );
     
     
    @@ -609,8 +609,8 @@ $(document).ready(function() {
     						
     					
     
    @@ -656,7 +656,7 @@ $(document).ready(function() {
     							
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -731,10 +731,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/advanced_init/dom_multiple_elements.html b/examples/advanced_init/dom_multiple_elements.html index 7fe7ce13..8b700967 100644 --- a/examples/advanced_init/dom_multiple_elements.html +++ b/examples/advanced_init/dom_multiple_elements.html @@ -615,8 +615,8 @@ div.dataTables_length { @@ -663,7 +663,7 @@ div.dataTables_length {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -738,10 +738,12 @@ div.dataTables_length {

    Plug-ins

    diff --git a/examples/advanced_init/dom_toolbar.html b/examples/advanced_init/dom_toolbar.html index adcf7f16..806b60bb 100644 --- a/examples/advanced_init/dom_toolbar.html +++ b/examples/advanced_init/dom_toolbar.html @@ -620,8 +620,8 @@ $(document).ready(function() { @@ -667,7 +667,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -742,10 +742,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/advanced_init/dt_events.html b/examples/advanced_init/dt_events.html index a3033f84..011da52b 100644 --- a/examples/advanced_init/dt_events.html +++ b/examples/advanced_init/dt_events.html @@ -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.

    This example shows the use of the sort, filter and sort, search and page events by adding a notification that the event fired to an element on the page to show that they have indeed fired.

    @@ -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() { @@ -664,7 +664,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -739,10 +739,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/advanced_init/events_live.html b/examples/advanced_init/events_live.html index f2e36e6c..3a5850eb 100644 --- a/examples/advanced_init/events_live.html +++ b/examples/advanced_init/events_live.html @@ -604,8 +604,8 @@ $(document).ready(function() { @@ -651,7 +651,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -726,10 +726,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/advanced_init/footer_callback.html b/examples/advanced_init/footer_callback.html index 3db8f03b..2cfd9d55 100644 --- a/examples/advanced_init/footer_callback.html +++ b/examples/advanced_init/footer_callback.html @@ -604,8 +604,8 @@ th { white-space: nowrap; } @@ -651,7 +651,7 @@ th { white-space: nowrap; }
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -726,10 +726,12 @@ th { white-space: nowrap; }

    Plug-ins

    diff --git a/examples/advanced_init/html5-data-attributes.html b/examples/advanced_init/html5-data-attributes.html index 57b32a10..555b7513 100644 --- a/examples/advanced_init/html5-data-attributes.html +++ b/examples/advanced_init/html5-data-attributes.html @@ -32,28 +32,29 @@ $(document).ready(function() {

    DataTables example - HTML5 data-* attributes

    -

    DataTables can use different data for different actions (display, sorting and filtering) which can +

    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 xxx-xxxx, 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.

    One method in which DataTables can obtain this orthogonal data for its different actions is through - custom HTML5 data attributes. DataTables will automatically detect two different attributes on the + custom HTML5 data attributes. DataTables will automatically detect four different attributes on the HTML elements:

      -
    • data-sort - for sorting data
    • -
    • data-filter - for filtering data
    • +
    • data-sort or data-order - for ordering data
    • +
    • data-filter or data-search - for search data
    -

    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 (/m) the column will correctly - sort numerically as the data-sort attribute is set on the column with plain numeric +

    This example shows the use of data-sort and data-filter 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 (/m) the column will correctly order numerically as the + data-sort / data-order attribute is set on the column with plain numeric data.

    @@ -610,8 +611,8 @@ $(document).ready(function() { @@ -657,7 +658,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -732,10 +733,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/advanced_init/index.html b/examples/advanced_init/index.html index da2832e7..f6e073af 100644 --- a/examples/advanced_init/index.html +++ b/examples/advanced_init/index.html @@ -50,7 +50,7 @@
  • Row grouping
  • Footer callback
  • Custom toolbar elements
  • -
  • Sort direction control
  • +
  • Order direction sequence control
  • diff --git a/examples/advanced_init/language_file.html b/examples/advanced_init/language_file.html index 16043d35..366f3ab7 100644 --- a/examples/advanced_init/language_file.html +++ b/examples/advanced_init/language_file.html @@ -602,8 +602,8 @@ $(document).ready(function() { @@ -649,7 +649,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -724,10 +724,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/advanced_init/length_menu.html b/examples/advanced_init/length_menu.html index a361ef59..d9fda898 100644 --- a/examples/advanced_init/length_menu.html +++ b/examples/advanced_init/length_menu.html @@ -604,8 +604,8 @@ $(document).ready(function() { @@ -651,7 +651,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -726,10 +726,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/advanced_init/row_callback.html b/examples/advanced_init/row_callback.html index b29acc13..2dbf39f3 100644 --- a/examples/advanced_init/row_callback.html +++ b/examples/advanced_init/row_callback.html @@ -618,8 +618,8 @@ td.highlight { @@ -665,7 +665,7 @@ td.highlight {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -740,10 +740,12 @@ td.highlight {

    Plug-ins

    diff --git a/examples/advanced_init/row_grouping.html b/examples/advanced_init/row_grouping.html index 1f09d73a..d4e77377 100644 --- a/examples/advanced_init/row_grouping.html +++ b/examples/advanced_init/row_grouping.html @@ -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">drawCallback function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A click event - handler is added for the grouping rows to allow the grouping sort to be restored as well as sorting by - any other column.

    + handler is added for the grouping rows to allow the grouping order to be restored as well as ordering + by any other column.

    @@ -581,7 +581,7 @@ $(document).ready(function() { "columnDefs": [ { "visible": false, "targets": 2 } ], - "sorting": [[ 2, 'asc' ]], + "order": [[ 2, 'asc' ]], "displayLength": 25, "drawCallback": 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 && currentOrder[1] === 'asc' ) { @@ -670,8 +670,8 @@ tr.group:hover { @@ -717,7 +717,7 @@ tr.group:hover {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -792,10 +792,12 @@ tr.group:hover {

    Plug-ins

    diff --git a/examples/advanced_init/sort_direction_control.html b/examples/advanced_init/sort_direction_control.html index fd256dfe..de1f24d5 100644 --- a/examples/advanced_init/sort_direction_control.html +++ b/examples/advanced_init/sort_direction_control.html @@ -4,7 +4,7 @@ - DataTables example - Sort direction control + DataTables example - Order direction sequence control @@ -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() {
    -

    DataTables example - Sort direction control

    +

    DataTables example - Order direction sequence control

    -

    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 - columns.sorting 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.

    +

    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 columns.orderSequence 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.

    The example below shows:

      -
    • Column 1 - default sorting
    • -
    • Column 2 - default sorting
    • -
    • Column 3 - ascending sorting only
    • -
    • Column 4 - descending sorting, followed by ascending and then ascending again
    • -
    • Column 5 - descending sorting only
    • -
    • Column 6 - default sorting
    • +
    • Column 1 - default ordering
    • +
    • Column 2 - default ordering
    • +
    • Column 3 - ascending ordering only
    • +
    • Column 4 - descending ordering, followed by ascending and then ascending again
    • +
    • Column 5 - descending ordering only
    • +
    • Column 6 - default ordering

    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.

    + ordering behaviour into a single table, but the example shows how these options can be use and + therefore applied across all columns.

    @@ -563,9 +563,9 @@ $(document).ready(function() { "aoColumns": [ null, null, - { "sorting": [ "asc" ] }, - { "sorting": [ "desc", "asc", "asc" ] }, - { "sorting": [ "desc" ] }, + { "orderSequence": [ "asc" ] }, + { "orderSequence": [ "desc", "asc", "asc" ] }, + { "orderSequence": [ "desc" ] }, null ] } ); @@ -626,8 +626,8 @@ $(document).ready(function() { @@ -673,7 +674,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -748,10 +749,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/ajax/custom_data_flat.html b/examples/ajax/custom_data_flat.html index 7118485a..810e016f 100644 --- a/examples/ajax/custom_data_flat.html +++ b/examples/ajax/custom_data_flat.html @@ -174,8 +174,8 @@ $(document).ready(function() { @@ -223,7 +224,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -298,10 +299,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/ajax/custom_data_property.html b/examples/ajax/custom_data_property.html index 660cf93a..08553595 100644 --- a/examples/ajax/custom_data_property.html +++ b/examples/ajax/custom_data_property.html @@ -159,8 +159,8 @@ $(document).ready(function() { @@ -208,7 +209,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -284,10 +285,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/ajax/deep.html b/examples/ajax/deep.html index edcdb657..ee440508 100644 --- a/examples/ajax/deep.html +++ b/examples/ajax/deep.html @@ -178,8 +178,8 @@ $(document).ready(function() { @@ -227,7 +228,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -302,10 +303,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/ajax/defer_render.html b/examples/ajax/defer_render.html index 7d5d9a42..63ef3642 100644 --- a/examples/ajax/defer_render.html +++ b/examples/ajax/defer_render.html @@ -147,8 +147,8 @@ $(document).ready(function() { @@ -196,7 +197,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -271,10 +272,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/ajax/index.html b/examples/ajax/index.html index d9ccb356..958fa777 100644 --- a/examples/ajax/index.html +++ b/examples/ajax/index.html @@ -17,7 +17,7 @@

    DataTables example - Ajax sourced data

    -

    DataTables can read data from a server via Ajax, while still performing filtering, sorting, paging +

    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 ajax option, which has a number of options to customise how the data is retrieved from the server.

    diff --git a/examples/ajax/null_data_source.html b/examples/ajax/null_data_source.html index 3a81258b..bc0f5b82 100644 --- a/examples/ajax/null_data_source.html +++ b/examples/ajax/null_data_source.html @@ -174,8 +174,8 @@ $(document).ready(function() {
    @@ -223,7 +224,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -299,10 +300,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/ajax/objects.html b/examples/ajax/objects.html index 8e51f9d4..50c510de 100644 --- a/examples/ajax/objects.html +++ b/examples/ajax/objects.html @@ -169,8 +169,8 @@ $(document).ready(function() { @@ -218,7 +219,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -293,10 +294,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/ajax/objects_subarrays.html b/examples/ajax/objects_subarrays.html index 4b02ce8c..f27ef4a1 100644 --- a/examples/ajax/objects_subarrays.html +++ b/examples/ajax/objects_subarrays.html @@ -190,8 +190,8 @@ $(document).ready(function() { @@ -239,7 +240,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -314,10 +315,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/ajax/simple.html b/examples/ajax/simple.html index 49e2db5c..5d310ea5 100644 --- a/examples/ajax/simple.html +++ b/examples/ajax/simple.html @@ -160,8 +160,8 @@ $(document).ready(function() { @@ -209,7 +210,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -284,10 +285,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/api/add_row.html b/examples/api/add_row.html index e6ce2d3c..27ec11c1 100644 --- a/examples/api/add_row.html +++ b/examples/api/add_row.html @@ -170,8 +170,8 @@ $(document).ready(function() { @@ -219,7 +220,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -292,10 +293,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/api/api_in_init.html b/examples/api/api_in_init.html index 06d226b9..9191f4cc 100644 --- a/examples/api/api_in_init.html +++ b/examples/api/api_in_init.html @@ -620,8 +620,8 @@ $(document).ready(function() { @@ -669,7 +670,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -742,10 +743,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/api/counter_columns.html b/examples/api/counter_columns.html index 263c651c..f9274409 100644 --- a/examples/api/counter_columns.html +++ b/examples/api/counter_columns.html @@ -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() {

    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.

    + dynamically as the ordering and searching applied to the table is altered by the end user.

    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 - sort and filter events emitted by the table. When these events are detected - the order and search events emitted by + the table. When these events are detected the column().nodes() method is used to get the TD/TH nodes for the target column and the each() helper function used to iterate over each, which have their contents updated as needed. Note that the filter and order options are using in the @@ -557,14 +559,14 @@ $(document).ready(function() { $(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; } ); @@ -626,8 +628,8 @@ $(document).ready(function() {

    @@ -675,7 +678,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -748,10 +751,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/api/form.html b/examples/api/form.html index 3b507912..178e2dad 100644 --- a/examples/api/form.html +++ b/examples/api/form.html @@ -41,16 +41,16 @@ $(document).ready(function() {

    DataTables example - Form inputs

    -

    In order to perform paging, sorting, filter etc, DataTables can remove rows and cells from the +

    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.

    The $() - method can be used to get nodes from the document regardless of paging, sorting etc. This example shows - $() being used - to get all input elements from the table.

    + method can be used to get nodes from the document regardless of paging, ordering etc. This example + shows $() + being used to get all input elements from the table.

    In the example a simple alert() is used to show the information from the form, but an Ajax call to the server with the form data could easily be performed.

    @@ -1686,8 +1686,8 @@ $(document).ready(function() {
    @@ -1735,7 +1736,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -1808,10 +1809,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/api/highlight.html b/examples/api/highlight.html index c82850d4..c68fcc83 100644 --- a/examples/api/highlight.html +++ b/examples/api/highlight.html @@ -66,7 +66,7 @@ $(document).ready(function() { class, respectively.

    -
    +
    @@ -635,8 +635,8 @@ td.highlight { @@ -684,7 +685,7 @@ td.highlight {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -757,10 +758,12 @@ td.highlight {

    Plug-ins

    diff --git a/examples/api/multi_filter.html b/examples/api/multi_filter.html index 9ec53174..75405ab8 100644 --- a/examples/api/multi_filter.html +++ b/examples/api/multi_filter.html @@ -638,8 +638,8 @@ $(document).ready(function() { @@ -687,7 +688,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -761,10 +762,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/api/multi_filter_select.html b/examples/api/multi_filter_select.html index 263521bd..7f655582 100644 --- a/examples/api/multi_filter_select.html +++ b/examples/api/multi_filter_select.html @@ -630,8 +630,8 @@ $(document).ready(function() { @@ -679,7 +680,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -752,10 +753,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/api/regex.html b/examples/api/regex.html index ac27826a..c15ab209 100644 --- a/examples/api/regex.html +++ b/examples/api/regex.html @@ -715,8 +715,8 @@ $(document).ready(function() { @@ -764,7 +765,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -837,10 +838,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/api/row_details.html b/examples/api/row_details.html index dd02f23f..a5ce00df 100644 --- a/examples/api/row_details.html +++ b/examples/api/row_details.html @@ -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() { "columns": [ { "class": 'details-control', - "sortable": false, + "orderable": false, "data": null, "defaultContent": '' }, @@ -173,7 +173,7 @@ $(document).ready(function() { { "data": "office" }, { "data": "salary" } ], - "sorting": [[1, 'asc']] + "order": [[1, 'asc']] } ); // Add event listener for opening and closing details @@ -255,8 +255,8 @@ tr.details td.details-control { @@ -304,7 +305,7 @@ tr.details td.details-control {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -378,10 +379,12 @@ tr.details td.details-control {

    Plug-ins

    diff --git a/examples/api/select_row.html b/examples/api/select_row.html index dd19332e..981c5ec2 100644 --- a/examples/api/select_row.html +++ b/examples/api/select_row.html @@ -613,8 +613,8 @@ $(document).ready(function() { @@ -662,7 +663,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -735,10 +736,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/api/select_single_row.html b/examples/api/select_single_row.html index 3cc2e8b6..ed461cb8 100644 --- a/examples/api/select_single_row.html +++ b/examples/api/select_single_row.html @@ -629,8 +629,8 @@ $(document).ready(function() { @@ -678,7 +679,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -752,10 +753,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/api/show_hide.html b/examples/api/show_hide.html index 6218ffb6..bd63a53b 100644 --- a/examples/api/show_hide.html +++ b/examples/api/show_hide.html @@ -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( { "scrollY": "200px", - "paginate": false + "paging": false } ); $('a.toggle-vis').on( 'click', function (e) { @@ -635,8 +635,8 @@ $(document).ready(function() { @@ -684,7 +685,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -757,10 +758,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/api/tabs_and_scrolling.html b/examples/api/tabs_and_scrolling.html index 762f59b9..e096654d 100644 --- a/examples/api/tabs_and_scrolling.html +++ b/examples/api/tabs_and_scrolling.html @@ -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( { "scrollY": "200px", "scrollCollapse": true, - "paginate": false, + "paging": false, "jQueryUI": true } ); } ); @@ -630,8 +630,8 @@ $(document).ready(function() { @@ -679,7 +680,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -753,10 +754,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/basic_init/alt_pagination.html b/examples/basic_init/alt_pagination.html index 14700e8a..4651d09a 100644 --- a/examples/basic_init/alt_pagination.html +++ b/examples/basic_init/alt_pagination.html @@ -19,7 +19,7 @@ $(document).ready(function() { $('#example').dataTable( { - "paginationType": "full_numbers" + "pagingType": "full_numbers" } ); } ); @@ -35,8 +35,8 @@ $(document).ready(function() {

    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 paginationType option.

    + mechanism, the pagingType option.

    There are four built-in options for which pagination controls DataTables should show:

    @@ -560,7 +560,7 @@ $(document).ready(function() {
     $(document).ready(function() {
     	$('#example').dataTable( {
    -		"paginationType": "full_numbers"
    +		"pagingType": "full_numbers"
     	} );
     } );
     
    @@ -619,8 +619,8 @@ $(document).ready(function() { @@ -666,7 +667,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -741,10 +742,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/basic_init/complex_header.html b/examples/basic_init/complex_header.html index e5c76147..12c428e8 100644 --- a/examples/basic_init/complex_header.html +++ b/examples/basic_init/complex_header.html @@ -32,12 +32,12 @@ $(document).ready(function() {

    When using tables to display data, you will often wish to display column information in groups. DataTables fully supports colspan and rowspan in the table's header, - assigning the required sort listeners to the TH element suitable for that column.

    + assigning the required order listeners to the TH element suitable for that column.

    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 sortCellsTop 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 orderCellsTop option can be used to tell DataTables to use the top cell if you prefer.

    The example shown below has two sets of grouped information, grouped by colspan in the header.

    @@ -600,8 +600,8 @@ $(document).ready(function() {
    @@ -648,7 +649,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -723,10 +724,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/basic_init/dom.html b/examples/basic_init/dom.html index 9c11b5dd..fa03098d 100644 --- a/examples/basic_init/dom.html +++ b/examples/basic_init/dom.html @@ -664,8 +664,8 @@ $(document).ready(function() { @@ -711,7 +712,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -786,10 +787,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/basic_init/filter_only.html b/examples/basic_init/filter_only.html index de7e2946..52a2d51e 100644 --- a/examples/basic_init/filter_only.html +++ b/examples/basic_init/filter_only.html @@ -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() {
     $(document).ready(function() {
     	$('#example').dataTable( {
    -		"paginate": false,
    -		"sort":     false,
    +		"paging":   false,
    +		"ordering": false,
     		"info":     false
     	} );
     } );
    @@ -596,8 +596,8 @@ $(document).ready(function() {
     						
     					
     
    @@ -643,7 +644,7 @@ $(document).ready(function() {
     							
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -718,10 +719,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/basic_init/flexible_width.html b/examples/basic_init/flexible_width.html index d6c672e0..c14b0ff1 100644 --- a/examples/basic_init/flexible_width.html +++ b/examples/basic_init/flexible_width.html @@ -599,8 +599,8 @@ div.container { @@ -646,7 +647,7 @@ div.container {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -721,10 +722,12 @@ div.container {

    Plug-ins

    diff --git a/examples/basic_init/hidden_columns.html b/examples/basic_init/hidden_columns.html index f0af1466..2210a337 100644 --- a/examples/basic_init/hidden_columns.html +++ b/examples/basic_init/hidden_columns.html @@ -625,8 +625,8 @@ $(document).ready(function() { @@ -672,7 +673,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -747,10 +748,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/basic_init/index.html b/examples/basic_init/index.html index b0e1c0e2..a6534191 100644 --- a/examples/basic_init/index.html +++ b/examples/basic_init/index.html @@ -35,8 +35,8 @@
    Name
    @@ -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() { @@ -610,7 +611,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -685,10 +686,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/basic_init/multiple_tables.html b/examples/basic_init/multiple_tables.html index e43adb23..00244941 100644 --- a/examples/basic_init/multiple_tables.html +++ b/examples/basic_init/multiple_tables.html @@ -394,8 +394,8 @@ div.dataTables_wrapper { @@ -441,7 +442,7 @@ div.dataTables_wrapper {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -516,10 +517,12 @@ div.dataTables_wrapper {

    Plug-ins

    diff --git a/examples/basic_init/scroll_x.html b/examples/basic_init/scroll_x.html index 2dba424b..c50fd70c 100644 --- a/examples/basic_init/scroll_x.html +++ b/examples/basic_init/scroll_x.html @@ -773,8 +773,8 @@ th, td { white-space: nowrap; } @@ -820,7 +821,7 @@ th, td { white-space: nowrap; }
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -895,10 +896,12 @@ th, td { white-space: nowrap; }

    Plug-ins

    diff --git a/examples/basic_init/scroll_xy.html b/examples/basic_init/scroll_xy.html index c4f3640c..06460dbf 100644 --- a/examples/basic_init/scroll_xy.html +++ b/examples/basic_init/scroll_xy.html @@ -766,8 +766,8 @@ th, td { white-space: nowrap; } @@ -813,7 +814,7 @@ th, td { white-space: nowrap; }
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -888,10 +889,12 @@ th, td { white-space: nowrap; }

    Plug-ins

    diff --git a/examples/basic_init/scroll_y.html b/examples/basic_init/scroll_y.html index 9c706680..16214f77 100644 --- a/examples/basic_init/scroll_y.html +++ b/examples/basic_init/scroll_y.html @@ -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( { "scrollY": "200px", "scrollCollapse": true, - "paginate": false + "paging": false } ); } ); @@ -608,8 +608,8 @@ $(document).ready(function() { @@ -655,7 +656,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -730,10 +731,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/basic_init/scroll_y_theme.html b/examples/basic_init/scroll_y_theme.html index 105abc10..978e53e6 100644 --- a/examples/basic_init/scroll_y_theme.html +++ b/examples/basic_init/scroll_y_theme.html @@ -598,8 +598,8 @@ $(document).ready(function() { @@ -646,7 +647,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -721,10 +722,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/basic_init/state_save.html b/examples/basic_init/state_save.html index d1059e8e..754fe40d 100644 --- a/examples/basic_init/state_save.html +++ b/examples/basic_init/state_save.html @@ -30,7 +30,7 @@ $('#example').dataTable( {

    DataTables example - State saving

    -

    DataTables has the option of being able to save the state of a table (its paging position, sorting +

    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

  • Zero configuration
  • Feature enable / disable
  • -
  • Default sorting
  • -
  • Multi-column sorting
  • +
  • Default ordering (sorting)
  • +
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
  • Complex headers (rowspan and colspan)
  • @@ -643,7 +643,8 @@ $('#example').dataTable( {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
  • -
  • Sort direction control
  • +
  • Order direction sequence + control
  • @@ -655,7 +656,7 @@ $('#example').dataTable( {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -730,10 +731,12 @@ $('#example').dataTable( {

    Plug-ins

    diff --git a/examples/basic_init/table_sorting.html b/examples/basic_init/table_sorting.html index 4c659471..3dea4c42 100644 --- a/examples/basic_init/table_sorting.html +++ b/examples/basic_init/table_sorting.html @@ -4,7 +4,7 @@ - DataTables example - Default sorting + DataTables example - Default ordering (sorting) @@ -19,7 +19,7 @@ $(document).ready(function() { $('#example').dataTable( { - "sorting": [[ 3, "desc" ]] + "order": [[ 3, "desc" ]] } ); } ); @@ -29,23 +29,23 @@ $(document).ready(function() {
    -

    DataTables example - Default sorting

    +

    DataTables example - Default ordering (sorting)

    -

    With DataTables you can alter the sorting characteristics of the table at initialisation time. Using - the sorting initialisation parameter, you can set the table to display - the data in exactly the order that you want.

    +

    With DataTables you can alter the ordering characteristics of the table at initialisation time. + Using the order initialisation parameter, you can set the table to display the + data in exactly the order that you want.

    -

    The sorting parameter is an array of arrays where the first value of the - inner array is the column to sort on, and the second is 'asc' (ascending sorting) or 'desc' - (descending sorting) as required. sorting is a 2D array to allow multi-column sorting to be +

    The order parameter is an array of arrays where the first value of the + inner array is the column to order on, and the second is 'asc' (ascending ordering) or 'desc' + (descending ordering) as required. order is a 2D array to allow multi-column ordering to be defined.

    -

    The table below is sorted (descending) by the Age column.

    +

    The table below is ordered (descending) by the Age column.

    @@ -544,7 +544,7 @@ $(document).ready(function() {
     $(document).ready(function() {
     	$('#example').dataTable( {
    -		"sorting": [[ 3, "desc" ]]
    +		"order": [[ 3, "desc" ]]
     	} );
     } );
     
    @@ -603,8 +603,8 @@ $(document).ready(function() { @@ -650,7 +651,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -725,10 +726,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/basic_init/zero_configuration.html b/examples/basic_init/zero_configuration.html index 6cf80ad9..97caf743 100644 --- a/examples/basic_init/zero_configuration.html +++ b/examples/basic_init/zero_configuration.html @@ -35,7 +35,7 @@ $(document).ready(function() {

    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.

    -

    Filtering, sorting, paging etc goodness will be immediately added to the table, as shown in this +

    Searching, ordering, paging etc goodness will be immediately added to the table, as shown in this example.

    @@ -592,8 +592,8 @@ $(document).ready(function() { @@ -639,7 +640,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -714,10 +715,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/data_sources/ajax.html b/examples/data_sources/ajax.html index 0d7cf4c1..0ac1740c 100644 --- a/examples/data_sources/ajax.html +++ b/examples/data_sources/ajax.html @@ -605,8 +605,8 @@ $(document).ready(function() { @@ -654,7 +655,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -729,10 +730,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/data_sources/dom.html b/examples/data_sources/dom.html index ef5f209c..36265cb2 100644 --- a/examples/data_sources/dom.html +++ b/examples/data_sources/dom.html @@ -33,7 +33,7 @@ $(document).ready(function() {

    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.

    @@ -590,8 +590,8 @@ $(document).ready(function() { @@ -639,7 +640,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -714,10 +715,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/data_sources/js_array.html b/examples/data_sources/js_array.html index 0ed68b83..8ccfb5db 100644 --- a/examples/data_sources/js_array.html +++ b/examples/data_sources/js_array.html @@ -256,8 +256,8 @@ $(document).ready(function() { @@ -305,7 +306,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -380,10 +381,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/data_sources/server_side.html b/examples/data_sources/server_side.html index e58d7171..56919fd8 100644 --- a/examples/data_sources/server_side.html +++ b/examples/data_sources/server_side.html @@ -36,7 +36,7 @@ $(document).ready(function() {

    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.

    @@ -149,8 +149,8 @@ $(document).ready(function() {
    @@ -198,7 +199,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -273,10 +274,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/plug-ins/api.html b/examples/plug-ins/api.html index 2a9755be..56caf4b7 100644 --- a/examples/plug-ins/api.html +++ b/examples/plug-ins/api.html @@ -65,8 +65,8 @@ $(document).ready(function() { the column() method and the options for its selectors.

    -

    For more information about sorting plug-ins; creating them and their requirements, please refer to - the plug-in development documentation.

    +

    For more information about API plug-ins; creating them and their requirements, please refer to the + plug-in development documentation.

    @@ -693,7 +694,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -768,10 +769,10 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/plug-ins/dom_sort.html b/examples/plug-ins/dom_sort.html index be6306be..7c93fecf 100644 --- a/examples/plug-ins/dom_sort.html +++ b/examples/plug-ins/dom_sort.html @@ -4,7 +4,7 @@ - DataTables example - Live DOM sorting + DataTables example - Live DOM ordering @@ -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() {
    -

    DataTables example - Live DOM sorting

    +

    DataTables example - Live DOM ordering

    -

    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 +

    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.

    + 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.

    -

    The example below shows the first two columns as normal text with sorting as you would expect. The +

    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.

    + within is what DataTables will perform the order on, based on the value at the time of the order.

    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 order() or draw() methods.

    @@ -1645,7 +1645,7 @@ $(document).ready(function() {

    The Javascript shown below is used to initialise the table shown in this example:

     /* 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( {
     		"columns": [
     			null,
    -			{ "sortDataType": "dom-text", "type": "numeric" },
    -			{ "sortDataType": "dom-text" },
    -			{ "sortDataType": "dom-select" }
    +			{ "orderDataType": "dom-text", "type": "numeric" },
    +			{ "orderDataType": "dom-text" },
    +			{ "orderDataType": "dom-select" }
     		]
     	} );
     } );
    @@ -1735,8 +1735,8 @@ $(document).ready(function() {
     						
     					
    @@ -1784,7 +1785,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -1859,10 +1860,10 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/plug-ins/index.html b/examples/plug-ins/index.html index acd44705..9c01b48b 100644 --- a/examples/plug-ins/index.html +++ b/examples/plug-ins/index.html @@ -19,7 +19,7 @@

    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.

    The examples in this section show how plug-ins can be used and developed for DataTables.

    @@ -37,10 +37,10 @@

    Plug-ins

    diff --git a/examples/plug-ins/range_filtering.html b/examples/plug-ins/range_filtering.html index 2e898fab..2cb2b9a1 100644 --- a/examples/plug-ins/range_filtering.html +++ b/examples/plug-ins/range_filtering.html @@ -652,8 +652,8 @@ $(document).ready(function() { @@ -701,7 +702,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -776,11 +777,11 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/plug-ins/sorting_auto.html b/examples/plug-ins/sorting_auto.html index 8cabf6a0..e608fe79 100644 --- a/examples/plug-ins/sorting_auto.html +++ b/examples/plug-ins/sorting_auto.html @@ -4,7 +4,7 @@ - DataTables example - Sorting plug-ins (with type detection) + DataTables example - Ordering plug-ins (with type detection) @@ -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() {
    -

    DataTables example - Sorting plug-ins (with type detection)

    +

    DataTables example - Ordering plug-ins (with type detection)

    -

    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.

    +

    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.

    -

    Formatted data of a particular kind can be automatically detected and a suitable sorting plug-in +

    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.

    -

    This example shows sorting with a comma for a decimal place, as is often used in parts of Europe +

    This example shows ordering with a comma for a decimal place, as is often used in parts of Europe with automatic type detection.

    -

    A wide variety of ready made sorting plug-ins can be found on the DataTables plug-ins page.

    +

    A wide variety of ready made ordering plug-ins can be found on the DataTables plug-ins page.

    @@ -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() { @@ -672,7 +674,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -747,11 +749,11 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/examples/plug-ins/sorting_manual.html b/examples/plug-ins/sorting_manual.html index 17db32f2..753a46f7 100644 --- a/examples/plug-ins/sorting_manual.html +++ b/examples/plug-ins/sorting_manual.html @@ -4,7 +4,7 @@ - DataTables example - Sorting plug-ins (no type detection) + DataTables example - Ordering plug-ins (no type detection) @@ -18,7 +18,7 @@ - - - - - - - -
    -
    -

    DataTables example - Base style - sort-column

    - -
    -

    This example shows DataTables with just the sort-column class specified. Typically you - would want to use the stripe feature class in addition to sort-column - (possibly hover as well), but this example shows just the sorted column highlighting.

    -
    - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    Tiger NixonSystem ArchitectEdinburgh612011/04/25$3,120
    Garrett WintersDirectorEdinburgh632011/07/25$5,300
    Ashton CoxTechnical AuthorSan Francisco662009/01/12$4,800
    Cedric KellyJavascript DeveloperEdinburgh222012/03/29$3,600
    Jenna ElliottFinancial ControllerEdinburgh332008/11/28$5,300
    Brielle WilliamsonIntegration SpecialistNew York612012/12/02$4,525
    Herrod ChandlerSales AssistantSan Francisco592012/08/06$4,080
    Rhona DavidsonIntegration SpecialistEdinburgh552010/10/14$6,730
    Colleen HurstJavascript DeveloperSan Francisco392009/09/15$5,000
    Sonya FrostSoftware EngineerEdinburgh232008/12/13$3,600
    Jena GainesSystem ArchitectLondon302008/12/19$5,000
    Quinn FlynnFinancial ControllerEdinburgh222013/03/03$4,200
    Charde MarshallRegional DirectorSan Francisco362008/10/16$5,300
    Haley KennedySenior Marketing DesignerLondon432012/12/18$4,800
    Tatyana FitzpatrickRegional DirectorLondon192010/03/17$2,875
    Michael SilvaSenior Marketing DesignerLondon662012/11/27$3,750
    Paul ByrdJavascript DeveloperNew York642010/06/09$5,000
    Gloria LittleSystems AdministratorNew York592009/04/10$3,120
    Bradley GreerSoftware EngineerLondon412012/10/13$3,120
    Dai RiosSystem ArchitectEdinburgh352012/09/26$4,200
    Jenette CaldwellFinancial ControllerNew York302011/09/03$4,965
    Yuri BerrySystem ArchitectNew York402009/06/25$3,600
    Caesar VanceTechnical AuthorNew York212011/12/12$4,965
    Doris WilderSales AssistantEdinburgh232010/09/20$4,965
    Angelica RamosSystem ArchitectLondon362009/10/09$2,875
    Gavin JoyceDeveloperEdinburgh422010/12/22$4,525
    Jennifer ChangRegional DirectorLondon282010/11/14$4,080
    Brenden WagnerSoftware EngineerSan Francisco182011/06/07$3,750
    Ebony GrimesSoftware EngineerSan Francisco482010/03/11$2,875
    Russell ChavezDirectorEdinburgh202011/08/14$3,600
    Michelle HouseIntegration SpecialistEdinburgh372011/06/02$3,750
    Suki BurksDeveloperLondon532009/10/22$2,875
    Prescott BartlettTechnical AuthorLondon272011/05/07$6,730
    Gavin CortezTechnical AuthorSan Francisco222008/10/26$6,730
    Martena MccrayIntegration SpecialistEdinburgh462011/03/09$4,080
    Unity ButlerSenior Marketing DesignerSan Francisco472009/12/09$3,750
    Howard HatfieldFinancial ControllerSan Francisco512008/12/16$4,080
    Hope FuentesFinancial ControllerSan Francisco412010/02/12$4,200
    Vivian HarrellSystem ArchitectSan Francisco622009/02/14$4,965
    Timothy MooneyFinancial ControllerLondon372008/12/11$4,200
    Jackson BradshawDirectorNew York652008/09/26$5,000
    Miriam WeissSupport EngineerEdinburgh642011/02/03$4,965
    Bruno NashSoftware EngineerLondon382011/05/03$4,200
    Odessa JacksonSupport EngineerEdinburgh372009/08/19$3,600
    Thor WaltonDeveloperNew York612013/08/11$3,600
    Finn CamachoSupport EngineerSan Francisco472009/07/07$4,800
    Elton BaldwinData CoordinatorEdinburgh642012/04/09$6,730
    Zenaida FrankSoftware EngineerNew York632010/01/04$4,800
    Zorita SerranoSoftware EngineerSan Francisco562012/06/01$5,300
    Jennifer AcostaJavascript DeveloperEdinburgh432013/02/01$2,875
    Cara StevensSales AssistantNew York462011/12/06$4,800
    Hermione ButlerDirectorLondon472011/03/21$4,080
    Lael GreerSystems AdministratorLondon212009/02/27$3,120
    Jonas AlexanderDeveloperSan Francisco302010/07/14$5,300
    Shad DeckerRegional DirectorEdinburgh512008/11/13$5,300
    Michael BruceJavascript DeveloperEdinburgh292011/06/27$4,080
    Donna SniderSystem ArchitectNew York272011/01/25$3,120
    - -
      -
    • Javascript
    • -
    • HTML
    • -
    • CSS
    • -
    • Ajax
    • -
    - -
    -
    -

    The Javascript shown below is used to initialise the table shown in this example:

    -
    -$(document).ready(function() {
    -	$('#example').dataTable();
    -} );
    -
    - -

    In addition to the above code, the following Javascript library files are loaded for use in this - example:

    - - -
    - -
    -

    The HTML shown below is the raw HTML table element, before it has been enhanced by - DataTables:

    -
    - -
    -
    -

    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:

    -
    -
    -
    -
    - -

    The following CSS library files are loaded for use in this example to provide the styling of the - table:

    - - -
    - -
    -

    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.

    -
    -
    - - - -
    - -
    - - \ No newline at end of file diff --git a/examples/styling/stripe.html b/examples/styling/stripe.html index b0f7a711..369f47d9 100644 --- a/examples/styling/stripe.html +++ b/examples/styling/stripe.html @@ -586,8 +586,8 @@ $(document).ready(function() { @@ -635,7 +636,7 @@ $(document).ready(function() {
  • Base style - row borders
  • Base style - cell borders
  • Base style - hover
  • -
  • Base style - sort-column
  • +
  • Base style - order-column
  • Base style - stripe
  • jQuery UI ThemeRoller
  • Bootstrap
  • @@ -710,10 +711,12 @@ $(document).ready(function() {

    Plug-ins

    diff --git a/media/css/jquery.dataTables.css b/media/css/jquery.dataTables.css index b7d4cd42..4d6472d1 100644 --- a/media/css/jquery.dataTables.css +++ b/media/css/jquery.dataTables.css @@ -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; } diff --git a/media/css/jquery.dataTables_themeroller.css b/media/css/jquery.dataTables_themeroller.css index b5070591..730c22b0 100644 --- a/media/css/jquery.dataTables_themeroller.css +++ b/media/css/jquery.dataTables_themeroller.css @@ -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; }