From 1ac1ea675284f4a88056133b4ddb27fcdf834140 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Thu, 11 Dec 2014 15:27:11 +0000 Subject: [PATCH] Dev: Support for a "private" examples directory where the examples are compiled but not included in the ToC Dev: longer line wrapping! --- .datatables-commit-sync | 2 +- examples/advanced_init/column_render.html | 84 +++---- examples/advanced_init/complex_header.html | 92 +++----- examples/advanced_init/defaults.html | 80 +++---- .../advanced_init/dom_multiple_elements.html | 87 +++---- examples/advanced_init/dom_toolbar.html | 92 +++----- examples/advanced_init/dt_events.html | 90 +++----- examples/advanced_init/events_live.html | 76 +++--- examples/advanced_init/footer_callback.html | 87 +++---- .../advanced_init/html5-data-attributes.html | 94 +++----- examples/advanced_init/index.html | 22 +- examples/advanced_init/language_file.html | 74 +++--- examples/advanced_init/length_menu.html | 75 +++--- examples/advanced_init/object_dom_read.html | 91 +++----- examples/advanced_init/row_callback.html | 82 +++---- examples/advanced_init/row_grouping.html | 83 +++---- .../advanced_init/sort_direction_control.html | 84 +++---- examples/ajax/custom_data_flat.html | 104 +++------ examples/ajax/custom_data_property.html | 108 ++++----- examples/ajax/deep.html | 98 +++----- examples/ajax/defer_render.html | 95 +++----- examples/ajax/index.html | 22 +- examples/ajax/null_data_source.html | 108 ++++----- examples/ajax/objects.html | 94 +++----- examples/ajax/objects_subarrays.html | 112 ++++----- examples/ajax/orthogonal-data.html | 94 +++----- examples/ajax/simple.html | 105 +++------ examples/api/add_row.html | 83 +++---- examples/api/api_in_init.html | 99 +++----- examples/api/counter_columns.html | 95 +++----- examples/api/form.html | 213 ++++++----------- examples/api/highlight.html | 88 +++---- examples/api/index.html | 19 +- examples/api/multi_filter.html | 103 +++------ examples/api/multi_filter_select.html | 121 ++++------ examples/api/regex.html | 112 ++++----- examples/api/row_details.html | 93 +++----- examples/api/select_row.html | 84 +++---- examples/api/select_single_row.html | 92 +++----- examples/api/show_hide.html | 98 +++----- examples/api/tabs_and_scrolling.html | 100 +++----- examples/basic_init/alt_pagination.html | 102 +++----- examples/basic_init/comma-decimal.html | 99 +++----- examples/basic_init/complex_header.html | 86 +++---- examples/basic_init/dom.html | 103 ++++----- examples/basic_init/filter_only.html | 74 +++--- examples/basic_init/flexible_width.html | 81 +++---- examples/basic_init/hidden_columns.html | 91 +++----- examples/basic_init/index.html | 16 +- examples/basic_init/language.html | 75 +++--- examples/basic_init/multi_col_sort.html | 103 ++++----- examples/basic_init/multiple_tables.html | 86 +++---- examples/basic_init/scroll_x.html | 85 +++---- examples/basic_init/scroll_xy.html | 73 +++--- examples/basic_init/scroll_y.html | 92 +++----- examples/basic_init/scroll_y_theme.html | 78 +++---- examples/basic_init/state_save.html | 103 ++++----- examples/basic_init/table_sorting.html | 89 +++---- examples/basic_init/zero_configuration.html | 75 +++--- examples/data_sources/ajax.html | 99 +++----- examples/data_sources/dom.html | 85 +++---- examples/data_sources/index.html | 15 +- examples/data_sources/js_array.html | 92 +++----- examples/data_sources/server_side.html | 98 +++----- examples/index.html | 42 ++-- examples/plug-ins/api.html | 88 +++---- examples/plug-ins/dom_sort.html | 218 ++++++------------ examples/plug-ins/index.html | 18 +- examples/plug-ins/range_filtering.html | 83 +++---- examples/plug-ins/sorting_auto.html | 88 +++---- examples/plug-ins/sorting_manual.html | 91 +++----- examples/server_side/custom_vars.html | 92 +++----- examples/server_side/defer_loading.html | 96 +++----- examples/server_side/ids.html | 90 +++----- examples/server_side/index.html | 32 +-- examples/server_side/jsonp.html | 97 +++----- examples/server_side/object_data.html | 88 +++---- examples/server_side/pipeline.html | 98 +++----- examples/server_side/post.html | 94 +++----- examples/server_side/row_details.html | 111 ++++----- examples/server_side/select_rows.html | 85 +++---- examples/server_side/simple.html | 93 +++----- examples/styling/bootstrap.html | 94 +++----- examples/styling/cell-border.html | 78 +++---- examples/styling/compact.html | 79 +++---- examples/styling/display.html | 90 +++----- examples/styling/foundation.html | 94 +++----- examples/styling/hover.html | 79 +++---- examples/styling/index.html | 21 +- examples/styling/jqueryUI.html | 103 +++------ examples/styling/no-classes.html | 78 +++---- examples/styling/order-column.html | 80 +++---- examples/styling/row-border.html | 78 +++---- examples/styling/stripe.html | 75 +++--- 94 files changed, 2969 insertions(+), 5119 deletions(-) diff --git a/.datatables-commit-sync b/.datatables-commit-sync index 90045a97..840e341e 100644 --- a/.datatables-commit-sync +++ b/.datatables-commit-sync @@ -1 +1 @@ -255be943427a9eef51879a387ff49b78a723a671 +0f7083c09363d54d9afd7ba3ad885bbe3dc23398 diff --git a/examples/advanced_init/column_render.html b/examples/advanced_init/column_render.html index edcc73cb..15cc0cf8 100644 --- a/examples/advanced_init/column_render.html +++ b/examples/advanced_init/column_render.html @@ -46,18 +46,14 @@ $(document).ready(function() {

DataTables example Column rendering

-

Each column has an optional rendering control called columns.renderDT which can be used to - process the content of each cell before the data is used. columns.renderDT has a wide array of options - available to it for 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.

+

Each column has an optional rendering control called columns.renderDT which can be used to process the content of each cell before the data is used. columns.renderDT has a + wide array of options available to it for 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 - column. This technique can be useful for adding links, assigning colours based on content rules and any - other form of text manipulation you require.

+

This example shows the person's age combined with their name in the first column, hiding the age column. This technique can be useful for adding links, + assigning colours based on content rules and any other form of text manipulation you require.

@@ -553,8 +549,7 @@ $(document).ready(function() {
-

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

$(document).ready(function() { +

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

$(document).ready(function() { $('#example').dataTable( { "columnDefs": [ { @@ -571,8 +566,7 @@ $(document).ready(function() { } ); } ); -

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

+

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:

+

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:

+

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:

+

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.

+

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.

-

The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

+

The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

@@ -633,8 +622,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -642,8 +630,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -702,14 +689,11 @@ $(document).ready(function() { @@ -755,10 +738,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -766,14 +747,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/complex_header.html b/examples/advanced_init/complex_header.html index e621b52d..95afc38d 100644 --- a/examples/advanced_init/complex_header.html +++ b/examples/advanced_init/complex_header.html @@ -38,23 +38,18 @@ $(document).ready(function() {

    DataTables example Complex headers (rowspan / colspan)

    -

    Complex headers (using colspan / rowspan) can be used to group columns of similar information in - DataTables, creating a very powerful visual effect.

    +

    Complex headers (using colspan / rowspan) can be used to group columns of similar information in DataTables, creating a very powerful visual effect.

    -

    In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when - working with hidden columns. The colspan and rowspan attributes for each cell are automatically - calculated and rendered on the page for you. This allows the columns.visibleDT option and column().visible()DT method to take into account - rowspan / colspan cells, drawing the header correctly.

    +

    In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when working with hidden columns. The colspan and rowspan + attributes for each cell are automatically calculated and rendered on the page for you. This allows the columns.visibleDT option + and column().visible()DT method + to take into account rowspan / colspan cells, drawing 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 ordering.

    +

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

    +

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

    @@ -554,8 +549,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable( { "columnDefs": [ { "visible": false, @@ -564,8 +558,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -626,8 +614,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -635,8 +622,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -650,8 +636,7 @@ $(document).ready(function() {
  • Column rendering
  • Page length options
  • Multiple table control elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -696,14 +681,11 @@ $(document).ready(function() { @@ -749,10 +730,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -760,14 +739,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/defaults.html b/examples/advanced_init/defaults.html index d8046a14..1834d6d3 100644 --- a/examples/advanced_init/defaults.html +++ b/examples/advanced_init/defaults.html @@ -39,16 +39,12 @@ $(document).ready(function() {

    DataTables example Setting defaults

    -

    When working with DataTables over multiple pages it is often useful to set the initialisation - defaults to common values (for example you might want to set domDT to a common value so all tables get - the same layout). This can be done using the $.fn.dataTable.defaults object. This object - will take all of the same parameters as the DataTables initialisation object, but in this case you are - setting the default for all future initialisations of DataTables.

    +

    When working with DataTables over multiple pages it is often useful to set the initialisation defaults to common values (for example you might want to set + domDT to a common value so + all tables get the same layout). This can be done using the $.fn.dataTable.defaults object. This object will take all of the same parameters as the + DataTables initialisation object, but in this case you are setting the default for all future initialisations of DataTables.

    -

    This example shows the searching and ordering 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.

    @@ -544,8 +540,7 @@ $(document).ready(function() {
    -

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

    $.extend( $.fn.dataTable.defaults, { +

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

    $.extend( $.fn.dataTable.defaults, { "searching": false, "ordering": false } ); @@ -555,8 +550,7 @@ $(document).ready(function() { $('#example').dataTable(); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -617,8 +606,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -626,8 +614,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -686,14 +673,11 @@ $(document).ready(function() { @@ -739,10 +722,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -750,14 +731,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/dom_multiple_elements.html b/examples/advanced_init/dom_multiple_elements.html index 9cfef03f..5f6f224f 100644 --- a/examples/advanced_init/dom_multiple_elements.html +++ b/examples/advanced_init/dom_multiple_elements.html @@ -43,18 +43,14 @@ $(document).ready(function() {

    DataTables example Multiple table control elements

    -

    As is described by the basic DOM positioning example you can use the domDT initialisation parameter to move - DataTables features around the table to where you want them. In addition to this, you can also use - domDT to create multiple instances of these - table controls. Simply include the feature's identification letter where you want it to appear, as many - times as you wish, and the controls will all sync up (note that obviously the table ('t') should be - included only once).

    +

    As is described by the basic DOM positioning example you can use the domDT initialisation parameter to move DataTables features around the table to where you want them. In + addition to this, you can also use domDT to create multiple instances of these table controls. Simply include the feature's identification + letter where you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table ('t') should be included only + once).

    -

    This is shown in the demo below where for four key build-in features are duplicated above and below - the table.

    +

    This is shown in the demo below where for four key build-in features are duplicated above and below the table.

    @@ -550,15 +546,13 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable( { "dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>' } ); } ); -

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

    +

    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:

    +

    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:

    div.dataTables_length { +

    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:

    div.dataTables_length { padding-left: 2em; } div.dataTables_length, @@ -584,25 +576,22 @@ $(document).ready(function() { }
    -

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

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -625,8 +614,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -634,8 +622,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -648,8 +635,7 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • +
  • Multiple table control elements
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
    • @@ -695,14 +681,11 @@ $(document).ready(function() { @@ -748,10 +730,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -759,14 +739,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/dom_toolbar.html b/examples/advanced_init/dom_toolbar.html index d7f4f333..1d29f59d 100644 --- a/examples/advanced_init/dom_toolbar.html +++ b/examples/advanced_init/dom_toolbar.html @@ -43,24 +43,18 @@ $(document).ready(function() {

    DataTables example Custom toolbar elements

    -

    DataTables inserts DOM elements around the table to control DataTables features, and you can make - use of this mechanism as well to insert your own custom elements. In this example a div with a class of 'toolbar' is created using domDT, with which HTML is inserted to create - the toolbar. You could put whatever HTML you want into the toolbar and add event handlers etc.

    +

    DataTables inserts DOM elements around the table to control DataTables features, and you can make use of this mechanism as well to insert your own custom + elements. In this example a div with a class of 'toolbar' is created using domDT, with which HTML is inserted to + create the toolbar. You could put whatever HTML you want into the toolbar and add event handlers etc.

    -

    For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in - API available, which can be used to create plug-ins which are used in a table by a single character - reference in the domDT option (like the built in option of - f refers to 'filtering input', you could have an - F option which creates your own filtering input control, - custom to your app).

    +

    For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in API available, which can be used to create plug-ins which + are used in a table by a single character reference in the domDT option (like the built in option of f refers to + 'filtering input', you could have an F option which creates your own filtering input control, custom to your app).

    -

    TableTools is a feature plug-in for - DataTables which adds buttons into a toolbar for a table, which controls such as copy to clipboard, - export and custom buttons.

    +

    TableTools is a feature plug-in for DataTables which adds buttons into a toolbar for a table, which + controls such as copy to clipboard, export and custom buttons.

    @@ -556,8 +550,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable( { "dom": '<"toolbar">frtip' } ); @@ -565,8 +558,7 @@ $(document).ready(function() { $("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>'); } ); -

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

    +

    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:

    +

    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:

    .toolbar { +

    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:

    .toolbar { float: left; }
    -

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

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -629,8 +616,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -638,8 +624,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -698,14 +683,11 @@ $(document).ready(function() { @@ -751,10 +732,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -762,14 +741,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/dt_events.html b/examples/advanced_init/dt_events.html index 5347fcd9..bad98207 100644 --- a/examples/advanced_init/dt_events.html +++ b/examples/advanced_init/dt_events.html @@ -43,23 +43,17 @@ $(document).ready(function() {

    DataTables example DataTables events

    -

    DataTables fires a number of custom events which you can bind to in the standard jQuery fashion - (although note that the namespace dt must be used), allowing your code to perform - custom actions when these events occur.

    +

    DataTables fires a number of custom events which you can bind to in the standard jQuery fashion (although note that the namespace dt must + be used), allowing your code to perform custom actions when these events occur.

    -

    All custom events fired by DataTables are fired with the namespace dt in order to - prevent conflicts arising with other jQuery plug-ins which also fire events. The DataTables on()DT method can be used like the jQuery - on() method, but will automatically append the dt namespace if required.

    +

    All custom events fired by DataTables are fired with the namespace dt in order to prevent conflicts arising with other jQuery plug-ins which also + fire events. The DataTables on()DT method can + be used like the jQuery on() method, but will automatically append the dt namespace if required.

    -

    This example shows the use of the orderDT, searchDT and pageDT events by adding a notification that the event fired - to an element on the page to show that they have indeed fired.

    +

    This example shows the use of the orderDT, + searchDT and pageDT events by adding a notification that the event + fired to an element on the page to show that they have indeed fired.

    @@ -557,8 +551,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { var eventFired = function ( type ) { var n = $('#demo_info')[0]; n.innerHTML += '<div>'+type+' event - '+new Date().getTime()+'</div>'; @@ -572,8 +565,7 @@ $(document).ready(function() { .dataTable(); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -634,8 +621,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -643,8 +629,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -703,14 +688,11 @@ $(document).ready(function() { @@ -756,10 +737,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -767,14 +746,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/events_live.html b/examples/advanced_init/events_live.html index ea61d217..6d8b70d1 100644 --- a/examples/advanced_init/events_live.html +++ b/examples/advanced_init/events_live.html @@ -38,13 +38,11 @@ $(document).ready(function() {

    DataTables example DOM / jQuery events

    -

    Events assigned to the table can be exceptionally useful for user interaction, however you must be - aware that DataTables will add and remove rows from the DOM as they are needed (i.e. when paging only - the visible elements are actually available in the DOM). As such, this can lead to the odd hiccup when - working with events.

    +

    Events assigned to the table can be exceptionally useful for user interaction, however you must be aware that DataTables will add and remove rows from the DOM + as they are needed (i.e. when paging only the visible elements are actually available in the DOM). As such, this can lead to the odd hiccup when working with + events.

    -

    One of the best ways of dealing with this is through the use of delegated events with jQuery's - on method, as shown in this example.

    +

    One of the best ways of dealing with this is through the use of delegated events with jQuery's on method, as shown in this example.

    @@ -540,8 +538,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable(); $('#example tbody').on('click', 'tr', function () { @@ -550,8 +547,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -612,8 +603,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -621,8 +611,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -681,14 +670,11 @@ $(document).ready(function() { @@ -734,10 +719,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -745,14 +728,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/footer_callback.html b/examples/advanced_init/footer_callback.html index 316c38c0..978ebaf6 100644 --- a/examples/advanced_init/footer_callback.html +++ b/examples/advanced_init/footer_callback.html @@ -68,20 +68,15 @@ $(document).ready(function() {

    DataTables example Footer callback

    -

    Through the use of the header and footer callback manipulation functions provided by DataTables - (headerCallbackDT and footerCallbackDT), it is possible to perform - some powerful and useful data manipulation functions, such as summarising data in the table.

    +

    Through the use of the header and footer callback manipulation functions provided by DataTables (headerCallbackDT and + footerCallbackDT), + it is possible to perform some powerful and useful data manipulation functions, such as summarising data in the table.

    -

    The example below shows a footer callback being used to total the data for a column (both the - visible and the hidden data) using the column().data()DT API method and column().footer()DT for writing the value into the - footer.

    +

    The example below shows a footer callback being used to total the data for a column (both the visible and the hidden data) using the column().data()DT API method and column().footer()DT for writing the + value into the footer.

    @@ -515,8 +510,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable( { "footerCallback": function ( row, data, start, end, display ) { var api = this.api(), data; @@ -553,8 +547,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    th { white-space: nowrap; } +

    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:

    th { white-space: nowrap; }
    -

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

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -615,8 +603,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -624,8 +611,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -684,14 +670,11 @@ $(document).ready(function() { @@ -737,10 +719,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -748,14 +728,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/html5-data-attributes.html b/examples/advanced_init/html5-data-attributes.html index a655a557..d7b016e1 100644 --- a/examples/advanced_init/html5-data-attributes.html +++ b/examples/advanced_init/html5-data-attributes.html @@ -33,30 +33,24 @@ $(document).ready(function() {

    DataTables example HTML5 data-* attributes

    -

    DataTables can use different data for different actions (display, ordering and searching) 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 searching allows both forms of the telephone number to be - used, while only the nicely formatted number is displayed in the table.

    +

    DataTables can use different data for different actions (display, ordering and searching) 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 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 four different attributes on the - HTML elements:

    +

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

    • data-sort or data-order - for ordering data
    • data-filter or data-search - for search data
    -

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

    +

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

    @@ -552,13 +546,11 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

    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:

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -619,8 +606,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -628,8 +614,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -688,14 +673,11 @@ $(document).ready(function() { @@ -741,10 +722,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -752,14 +731,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/index.html b/examples/advanced_init/index.html index 8f549709..f58eee03 100644 --- a/examples/advanced_init/index.html +++ b/examples/advanced_init/index.html @@ -19,13 +19,12 @@

    DataTables example Advanced initialisation

    -

    The configuration options offered by DataTables extend much further than the options shown in the - basic initialisation of this documentation. Through combinations of the options available and the use - of callbacks, DataTables is completely customisable and will fit into exactly what you need for your - table display.

    +

    The configuration options offered by DataTables extend much further than the options shown in the basic initialisation of this documentation. Through + combinations of the options available and the use of callbacks, DataTables is completely customisable and will fit into exactly what you need for your table + display.

    -

    This section shows some more advanced initialisation options. Keep in mind also that each example - can be combined with the other examples to get what you want!

    +

    This section shows some more advanced initialisation options. Keep in mind also that each example can be combined with the other examples to get what you + want!

    @@ -59,14 +58,11 @@
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/language_file.html b/examples/advanced_init/language_file.html index 8ea52d55..70074c41 100644 --- a/examples/advanced_init/language_file.html +++ b/examples/advanced_init/language_file.html @@ -37,11 +37,9 @@ $(document).ready(function() {

    DataTables example Language file

    -

    As well as being able to pass language information to DataTables through the languageDT initialisation option, you can - also store the language information in a file, which DataTables can load by Ajax using the As well as being able to pass language information to DataTables through the languageDT initialisation option, you can also store the language information in a file, which + DataTables can load by Ajax using the language.urlDT option.

    The following example shows DataTables reading a German language file.

    @@ -540,8 +538,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable( { "language": { "url": "../resources/de_DE.txt" @@ -549,8 +546,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -611,8 +602,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -620,8 +610,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -680,14 +669,11 @@ $(document).ready(function() {
    @@ -733,10 +718,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -744,14 +727,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/length_menu.html b/examples/advanced_init/length_menu.html index a9b76ad8..a64758ff 100644 --- a/examples/advanced_init/length_menu.html +++ b/examples/advanced_init/length_menu.html @@ -35,17 +35,16 @@ $(document).ready(function() {

    DataTables example Page length options

    -

    It is possible to easily customise the options shown in the length menu (by default at the top left - of the table) using the lengthMenuDT initialisation +

    It is possible to easily customise the options shown in the length menu (by default at the top left of the table) using the lengthMenuDT initialisation option.

    This parameter can take one of two forms:

    • A 1D array of options which will be used for both the displayed option and the value, or
      • -
    • A 2D array in which the first array is used to define the value options and the second array - the displayed options (useful for language strings such as 'All').
      • +
    • A 2D array in which the first array is used to define the value options and the second array the displayed options (useful for language strings such as + 'All').

    The example below shows a 2D array being used to include a "Show all" records option.

    @@ -544,15 +543,13 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable( { "lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]] } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -613,8 +605,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -622,8 +613,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -682,14 +672,11 @@ $(document).ready(function() {
    @@ -735,10 +721,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -746,14 +730,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/object_dom_read.html b/examples/advanced_init/object_dom_read.html index c6af897a..7e12093f 100644 --- a/examples/advanced_init/object_dom_read.html +++ b/examples/advanced_init/object_dom_read.html @@ -42,25 +42,18 @@ $(document).ready(function() {

    DataTables example Read HTML to data objects

    -

    When DataTables reads the table content from an HTML table (rather than an Ajax or Javascript data - source), by default it will read the information in the table into an array that DataTables stores - internally. Each array element represents a column.

    +

    When DataTables reads the table content from an HTML table (rather than an Ajax or Javascript data source), by default it will read the information in the table + into an array that DataTables stores internally. Each array element represents a column.

    -

    It can be very useful to have DataTables read the information into an object rather than an array, - an option that can be triggered using the columns.dataDT initialisation option to - define how you want the data to be stored. Typically columns.dataDT is used with Ajax sourced data to tell DataTables where to read data from, but as can be - seen here it also tells DataTables where to write the data to.

    +

    It can be very useful to have DataTables read the information into an object rather than an array, an option that can be triggered using the columns.dataDT + initialisation option to define how you want the data to be stored. Typically columns.dataDT is used with Ajax sourced data to tell DataTables + where to read data from, but as can be seen here it also tells DataTables where to write the data to.

    -

    This ability to store data into an object can be very useful when working with the DataTables API - after the table has been initialised.

    +

    This ability to store data into an object can be very useful when working with the DataTables API after the table has been initialised.

    -

    In the example shown here, the data read from each row in the table is read into a Javascript object - with the structure:

    +

    In the example shown here, the data read from each row in the table is read into a Javascript object with the structure:

     {
 	"name":	   "...",
@@ -569,8 +562,7 @@ $(document).ready(function() {
 
 			
    
 				
    
-					
    The Javascript shown below is used to initialise the table shown in this
-					example:
    $(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this example:
    $(document).ready(function() {
 	$('#example').DataTable({
 		"columns": [
 			{ "data": "name" },
@@ -583,8 +575,7 @@ $(document).ready(function() {
 	});
 } );
 
-					
    In addition to the above code, the following Javascript library files are loaded for use in this
-					example:
    
+					
    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:
    
+					
    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:
    
+						
    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:
    
+					
    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.
    
+					
    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.
    
 				
    
 
 				
    
-					
    The script used to perform the server-side processing for this table is shown below. Please note
-					that this is just an example script using PHP. Server-side processing scripts can be written in any
-					language, using the protocol described in the
-					DataTables documentation.
    
+					
    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using the protocol described in the DataTables
+					documentation.
    
 				
    
 			
    
 		
@@ -645,8 +631,7 @@ $(document).ready(function() {
 							
  • Multi-column ordering
    • 
 							
  • Multiple tables
    • 
 							
  • Hidden columns
    • 
-							
  • Complex headers (rowspan and
-							colspan)
    • 
+							
  • Complex headers (rowspan and colspan)
    • 
 							
  • DOM positioning
    • 
 							
  • Flexible table width
    • 
 							
  • State saving
    • 
@@ -654,8 +639,7 @@ $(document).ready(function() {
 							
  • Scroll - vertical
    • 
 							
  • Scroll - horizontal
    • 
 							
  • Scroll - horizontal and vertical
    • 
-							
  • Scroll - vertical with jQuery UI
-							ThemeRoller
    • 
+							
  • Scroll - vertical with jQuery UI ThemeRoller
    • 
 							
  • Language - Comma decimal place
    • 
 							
  • Language options
    • 
 						
@@ -714,14 +698,11 @@ $(document).ready(function() {
    @@ -767,10 +747,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -778,14 +756,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/row_callback.html b/examples/advanced_init/row_callback.html index b7293935..f0f64df4 100644 --- a/examples/advanced_init/row_callback.html +++ b/examples/advanced_init/row_callback.html @@ -44,17 +44,13 @@ $(document).ready(function() {

    DataTables example Row created callback

    -

    The following example shows how a callback function can be used to format a particular row at draw - time. For each row that is generated for display, the createdRowDT function is called once and - once only. It is passed the create row node which can then be modified.

    +

    The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the + createdRowDT function + is called once and once only. It is passed the create row node which can then be modified.

    -

    In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to - the container cell if the salary is greater than $4,000. Note that columns.createdCellDT could also be used to - create exactly the same effect.

    +

    In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to the container cell if the salary is greater than $4,000. + Note that columns.createdCellDT could also be used to create exactly the same effect.

    @@ -550,8 +546,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable( { "createdRow": function ( row, data, index ) { if ( data[5].replace(/[\$,]/g, '') * 1 > 4000 ) { @@ -561,8 +556,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    td.highlight { +

    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:

    td.highlight { font-weight: bold; color: blue; }
    -

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

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -626,8 +615,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -635,8 +623,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -695,14 +682,11 @@ $(document).ready(function() { @@ -748,10 +731,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -759,14 +740,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/row_grouping.html b/examples/advanced_init/row_grouping.html index 9e8dc95f..a4c0aa78 100644 --- a/examples/advanced_init/row_grouping.html +++ b/examples/advanced_init/row_grouping.html @@ -70,17 +70,14 @@ $(document).ready(function() {

    DataTables example Row grouping

    -

    Although DataTables doesn't have row grouping built-in (picking one of the many methods available - would overly limit the DataTables core), it is most certainly possible to give the look and feel of row - grouping.

    +

    Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the DataTables core), it is most certainly + possible to give the look and feel of row grouping.

    -

    In the example below the 'group' is the office location, which is based on the information in the - third column (which is set to hidden). The grouping indicator is added by the drawCallbackDT 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 order to be - restored as well as ordering by any other column.

    +

    In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden). The grouping indicator + is added by the drawCallbackDT 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 order to be restored as well as + ordering by any other column.

    @@ -576,8 +573,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { var table = $('#example').DataTable({ "columnDefs": [ { "visible": false, "targets": 2 } @@ -613,8 +609,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    tr.group, +

    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:

    tr.group, tr.group:hover { background-color: #ddd !important; }
    -

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

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -678,8 +668,7 @@ tr.group:hover {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -687,8 +676,7 @@ tr.group:hover {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -747,14 +735,11 @@ tr.group:hover { @@ -800,10 +784,8 @@ tr.group:hover {

    Plug-ins

    @@ -811,14 +793,11 @@ tr.group:hover {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/advanced_init/sort_direction_control.html b/examples/advanced_init/sort_direction_control.html index fd5eb39e..5f81d0e3 100644 --- a/examples/advanced_init/sort_direction_control.html +++ b/examples/advanced_init/sort_direction_control.html @@ -42,12 +42,10 @@ $(document).ready(function() {

    DataTables example Order direction sequence control

    -

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

    +

    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.orderSequenceDT 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:

    @@ -60,9 +58,8 @@ $(document).ready(function() {
  • 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 - ordering behaviour into a single table, but the example shows how these options can be use and - therefore applied across all columns.

    +

    It's worth noting that I don't have a good use case for when you might what to mix such complex ordering behaviour into a single table, but the example shows + how these options can be use and therefore applied across all columns.

    @@ -558,8 +555,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable( { "aoColumns": [ null, @@ -572,8 +568,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -634,8 +624,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -643,8 +632,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -667,8 +655,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -704,14 +691,11 @@ $(document).ready(function() { @@ -757,10 +740,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -768,14 +749,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/ajax/custom_data_flat.html b/examples/ajax/custom_data_flat.html index 9609186c..5d706dfa 100644 --- a/examples/ajax/custom_data_flat.html +++ b/examples/ajax/custom_data_flat.html @@ -44,30 +44,23 @@ $(document).ready(function() {

    DataTables example Flat array data source

    -

    When loading data from an Ajax source, by default, DataTables will look for the data to use in the - data parameter of a returned object (e.g. { "data": [...] }). This can easily - be change by using the dataSrc option of the ajaxDT initiation option.

    +

    When loading data from an Ajax source, by default, DataTables will look for the data to use in the data parameter of a returned object (e.g. + { "data": [...] }). This can easily be change by using the dataSrc option of the ajaxDT initiation option.

    The ajax.dataSrcDT has a number of ways in which - it can be used:

    + "DataTables initialisation option">ajax.dataSrcDT     has a number of ways in which it can be used:

      -
    • As a string (e.g. dataSrc: 'myData') - obtain data from a different property in - the source object.
      • -
    • As an empty string (e.g. dataSrc: '') - the data source is not an object but an - array.
      • -
    • As a function (e.g. dataSrc: function(json) {}) - a function can be used to - transform the data from one source format to another (for example you could convert from XML to a - Javascript object). The value returned from the function is used as the data for the table.
      • +
    • As a string (e.g. dataSrc: 'myData') - obtain data from a different property in the source object.
      • +
    • As an empty string (e.g. dataSrc: '') - the data source is not an object but an array.
      • +
    • As a function (e.g. dataSrc: function(json) {}) - a function can be used to transform the data from one source format to another (for example + you could convert from XML to a Javascript object). The value returned from the function is used as the data for the table.
    -

    The example below shows ajax.dataSrcDT being used as - an empty string. This tells DataTables that the JSON loaded is a plain array, not an object with an - array inside it as is the default.

    +

    The example below shows ajax.dataSrcDT being used as an empty string. This tells DataTables that the JSON loaded is a plain + array, not an object with an array inside it as is the default.

    @@ -104,8 +97,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable( { "ajax": { "url": "data/objects_root_array.txt", @@ -122,8 +114,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -184,8 +170,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -193,8 +178,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -207,10 +191,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -219,8 +201,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -256,14 +237,11 @@ $(document).ready(function() { @@ -309,10 +286,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -320,14 +295,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/ajax/custom_data_property.html b/examples/ajax/custom_data_property.html index 139399a6..26a9085c 100644 --- a/examples/ajax/custom_data_property.html +++ b/examples/ajax/custom_data_property.html @@ -36,31 +36,23 @@ $(document).ready(function() {

    DataTables example Custom data source property

    -

    When loading data from an Ajax source, by default, DataTables will look for the data to use in the - data parameter of a returned object (e.g. { "data": [...] }). This can easily - be change by using the dataSrc option of the ajaxDT initiation option.

    +

    When loading data from an Ajax source, by default, DataTables will look for the data to use in the data parameter of a returned object (e.g. + { "data": [...] }). This can easily be change by using the dataSrc option of the ajaxDT initiation option.

    The ajax.dataSrcDT has a number of ways in which - it can be used:

    + "DataTables initialisation option">ajax.dataSrcDT     has a number of ways in which it can be used:

      -
    • As a string (e.g. dataSrc: 'myData') - obtain data from a different property in - the source object.
      • -
    • As an empty string (e.g. dataSrc: '') - the data source is not an object but an - array.
      • -
    • As a function (e.g. dataSrc: function(json) {}) - a function can be used to - transform the data from one source format to another (for example you could convert from XML to a - Javascript object). The value returned from the function is used as the data for the table.
      • +
    • As a string (e.g. dataSrc: 'myData') - obtain data from a different property in the source object.
      • +
    • As an empty string (e.g. dataSrc: '') - the data source is not an object but an array.
      • +
    • As a function (e.g. dataSrc: function(json) {}) - a function can be used to transform the data from one source format to another (for example + you could convert from XML to a Javascript object). The value returned from the function is used as the data for the table.
    -

    The example below shows ajax.dataSrcDT being used as - a string to get the data from a different source property, in this case demo but it could be any value, included a nested property by using standard dotted - Javascript object notation.

    +

    The example below shows ajax.dataSrcDT being used as a string to get the data from a different source property, in this case + demo but it could be any value, included a nested property by using standard dotted Javascript object notation.

    @@ -97,8 +89,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable( { "ajax": { "url": "data/arrays_custom_prop.txt", @@ -107,8 +98,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -169,8 +154,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -178,8 +162,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -192,10 +175,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -204,8 +185,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -241,14 +221,11 @@ $(document).ready(function() { @@ -286,8 +262,7 @@ $(document).ready(function() {
  • Row selection
  • JSONP data source for remote domains
  • Deferred loading of data
    • -
  • Pipelining data to reduce Ajax calls for - paging
    • +
  • Pipelining data to reduce Ajax calls for paging
    • @@ -295,10 +270,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -306,14 +279,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/ajax/deep.html b/examples/ajax/deep.html index 90be4a81..a395f704 100644 --- a/examples/ajax/deep.html +++ b/examples/ajax/deep.html @@ -42,22 +42,17 @@ $(document).ready(function() {

    DataTables example Nested object data (objects)

    -

    DataTables has the ability to use data from almost data JSON data source through the use of the - columns.dataDT option. In its simplest case, - it can be used to read arbitrary object properties, but can also be extended to n levels of - nested objects / arrays through the use of standard Javascript dotted object notation. Each dot - (.) in the columns.dataDT option represents - another object level.

    +

    DataTables has the ability to use data from almost data JSON data source through the use of the columns.dataDT option. In + its simplest case, it can be used to read arbitrary object properties, but can also be extended to n levels of nested objects / arrays through the use of + standard Javascript dotted object notation. Each dot (.) in the columns.dataDT option represents another object level.

    -

    In this example hr.position refers to the position property of the - hr object in the row's data source object, while contact.0 refers to the - first element of the contact array. Any number of dots can be used to obtain deeply nested - data.

    +

    In this example hr.position refers to the position property of the hr object in the row's data source object, while + contact.0 refers to the first element of the contact array. Any number of dots can be used to obtain deeply nested data.

    -

    The example below shows DataTables reading information for the columns from nested objects and - arrays, where the structure of the row's data source in this example is:

    +

    The example below shows DataTables reading information for the columns from nested objects and arrays, where the structure of the row's data source in this + example is:

     {
 	"name": "Tiger Nixon",
@@ -109,8 +104,7 @@ $(document).ready(function() {
 
 			
    
 				
    
-					
    The Javascript shown below is used to initialise the table shown in this
-					example:
    $(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"processing": true,
 		"ajax": "data/objects_deep.txt",
@@ -125,8 +119,7 @@ $(document).ready(function() {
 	} );
 } );
 
-					
    In addition to the above code, the following Javascript library files are loaded for use in this
-					example:
    
+					
    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:
    
+					
    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:
    
+						
    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:
    
+					
    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.
    
+					
    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.
    
 				
    
 
 				
    
-					
    The script used to perform the server-side processing for this table is shown below. Please note
-					that this is just an example script using PHP. Server-side processing scripts can be written in any
-					language, using the protocol described in the
-					DataTables documentation.
    
+					
    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using the protocol described in the DataTables
+					documentation.
    
 				
    
 			
    
 		
@@ -187,8 +175,7 @@ $(document).ready(function() {
 							
  • Multi-column ordering
    • 
 							
  • Multiple tables
    • 
 							
  • Hidden columns
    • 
-							
  • Complex headers (rowspan and
-							colspan)
    • 
+							
  • Complex headers (rowspan and colspan)
    • 
 							
  • DOM positioning
    • 
 							
  • Flexible table width
    • 
 							
  • State saving
    • 
@@ -196,8 +183,7 @@ $(document).ready(function() {
 							
  • Scroll - vertical
    • 
 							
  • Scroll - horizontal
    • 
 							
  • Scroll - horizontal and vertical
    • 
-							
  • Scroll - vertical with jQuery UI
-							ThemeRoller
    • 
+							
  • Scroll - vertical with jQuery UI ThemeRoller
    • 
 							
  • Language - Comma decimal place
    • 
 							
  • Language options
    • 
 						
@@ -210,10 +196,8 @@ $(document).ready(function() {
 							
  • DataTables events
    • 
 							
  • Column rendering
    • 
 							
  • Page length options
    • 
-							
  • Multiple table control
-							elements
    • 
-							
  • Complex headers (rowspan /
-							colspan)
    • 
+							
  • Multiple table control elements
    • 
+							
  • Complex headers (rowspan / colspan)
    • 
 							
  • Read HTML to data objects
    • 
 							
  • HTML5 data-* attributes
    • 
 							
  • Language file
    • 
@@ -222,8 +206,7 @@ $(document).ready(function() {
 							
  • Row grouping
    • 
 							
  • Footer callback
    • 
 							
  • Custom toolbar elements
    • 
-							
  • Order direction sequence
-							control
    • 
+							
  • Order direction sequence control
    •
    @@ -259,14 +242,11 @@ $(document).ready(function() { @@ -312,10 +291,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -323,14 +300,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/ajax/defer_render.html b/examples/ajax/defer_render.html index f26225b3..dddebb9e 100644 --- a/examples/ajax/defer_render.html +++ b/examples/ajax/defer_render.html @@ -34,21 +34,17 @@ $(document).ready(function() {

    DataTables example Deferred rendering for speed

    -

    When working with large data sources, you might seek to improve the speed at which DataTables runs. - One method to do this is to make use of the built-in deferred rendering option in DataTables with the - When working with large data sources, you might seek to improve the speed at which DataTables runs. One method to do this is to make use of the built-in + deferred rendering option in DataTables with the deferRenderDT option.

    -

    When deferred rendering is enabled, rather than having DataTables create all TR and TD nodes required for the - table when the data is loaded, DataTables will only create the nodes required for each individual row - at the time of that row being drawn on the page (these nodes are then retained in case they are needed - again so they aren't created multiple times). This can give a significant performance increase, since a - lot less work is done at initialisation time.

    +

    When deferred rendering is enabled, rather than having DataTables create all TR and TD nodes required for the table when the data is loaded, DataTables will only create the nodes required for each individual row at the time of + that row being drawn on the page (these nodes are then retained in case they are needed again so they aren't created multiple times). This can give a significant + performance increase, since a lot less work is done at initialisation time.

    -

    The example below shows DataTables with deferred rendering enabled. For this small example you'll - likely notice no difference, but larger tables can benefit significantly from simply enabling this - parameter.

    +

    The example below shows DataTables with deferred rendering enabled. For this small example you'll likely notice no difference, but larger tables can benefit + significantly from simply enabling this parameter.

    @@ -85,16 +81,14 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable( { "ajax": "data/arrays.txt", "deferRender": true } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -155,8 +144,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -164,8 +152,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -178,10 +165,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -190,8 +175,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -227,14 +211,11 @@ $(document).ready(function() { @@ -280,10 +260,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -291,14 +269,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/ajax/index.html b/examples/ajax/index.html index fea0e5b8..b6b14e9b 100644 --- a/examples/ajax/index.html +++ b/examples/ajax/index.html @@ -19,14 +19,11 @@

    DataTables example Ajax sourced data

    -

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

    +

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

    -

    The examples in this section demonstrate the use of Ajax loading data in DataTables, with - client-side processing.

    +

    The examples in this section demonstrate the use of Ajax loading data in DataTables, with client-side processing.

    @@ -54,14 +51,11 @@
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/ajax/null_data_source.html b/examples/ajax/null_data_source.html index 6466bef2..699c7215 100644 --- a/examples/ajax/null_data_source.html +++ b/examples/ajax/null_data_source.html @@ -43,32 +43,24 @@ $(document).ready(function() {

    DataTables example Generated content for a column

    -

    In some tables you might wish to have some content generated automatically. This can be done in a - number of ways:

    +

    In some tables you might wish to have some content generated automatically. This can be done in a number of ways:

    • columns.renderDT for content that is - dynamic (i.e. based upon the row's data)
      • + "DataTables initialisation option">columns.renderDT       for content that is dynamic (i.e. based upon the row's data)
    • columns.defaultContentDT for static - content (i.e. simple strings)
      • + "DataTables initialisation option">columns.defaultContentDT       for static content (i.e. simple strings)
    -

    This examples shows the use of columns.defaultContentDT to create a - button element in the last column of the table. A simple jQuery click event - listener is used to watch for clicks on the row, and when activated uses the row().data()DT method to get the data for the row and - show a bit of information about it in an alert box. This is a simple use case, but it can - be built up to be arbitrarily complex.

    +

    This examples shows the use of columns.defaultContentDT to create a button element in the last column of the table. A simple + jQuery click event listener is used to watch for clicks on the row, and when activated uses the row().data()DT method to get the data for the + row and show a bit of information about it in an alert box. This is a simple use case, but it can be built up to be arbitrarily complex.

    -

    Note also that the columns.dataDT option for the column - has been set to null to indicate that the column has no information that should be - obtained data source object.

    +

    Note also that the columns.dataDT option for the column has been set to null to indicate that the column has + no information that should be obtained data source object.

    @@ -105,8 +97,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { var table = $('#example').DataTable( { "ajax": "data/arrays.txt", "columnDefs": [ { @@ -122,8 +113,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -184,8 +169,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -193,8 +177,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -207,10 +190,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -219,8 +200,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -256,14 +236,11 @@ $(document).ready(function() { @@ -310,10 +285,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -321,14 +294,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/ajax/objects.html b/examples/ajax/objects.html index eaabbc29..b0c5d240 100644 --- a/examples/ajax/objects.html +++ b/examples/ajax/objects.html @@ -41,19 +41,16 @@ $(document).ready(function() {

    DataTables example Ajax data source (objects)

    -

    To try and make life easy, by default, DataTables expects arrays to be used as the data source for - rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects - as the data source for each row (i.e. each row has its data described by an object) as this can make - working with the data much more understandable, particularly if you are using the API and you don't - need to keep track of array indexes.

    +

    To try and make life easy, by default, DataTables expects arrays to be used as the data source for rows in the table. However, this isn't always useful, and you + may wish to have DataTables use objects as the data source for each row (i.e. each row has its data described by an object) as this can make working with the data + much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.

    -

    This can be done quite simply by using the columns.dataDT option which you use to tell - DataTables which property to use from the data source object for each column.

    +

    This can be done quite simply by using the columns.dataDT option which you use to tell DataTables which property to use from the data source object + for each column.

    -

    In this example the Ajax source returns an array of objects, which DataTables uses to display the - table. The structure of the row's data source in this example is:

    +

    In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example + is:

     {
 	"name":	   "Tiger Nixon",
@@ -101,8 +98,7 @@ $(document).ready(function() {
 
 			
    
 				
    
-					
    The Javascript shown below is used to initialise the table shown in this
-					example:
    $(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"ajax": "data/objects.txt",
 		"columns": [
@@ -116,8 +112,7 @@ $(document).ready(function() {
 	} );
 } );
 
-					
    In addition to the above code, the following Javascript library files are loaded for use in this
-					example:
    
+					
    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:
    
+					
    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:
    
+						
    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:
    
+					
    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.
    
+					
    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.
    
 				
    
 
 				
    
-					
    The script used to perform the server-side processing for this table is shown below. Please note
-					that this is just an example script using PHP. Server-side processing scripts can be written in any
-					language, using the protocol described in the
-					DataTables documentation.
    
+					
    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using the protocol described in the DataTables
+					documentation.
    
 				
    
 			
    
 		
@@ -178,8 +168,7 @@ $(document).ready(function() {
 							
  • Multi-column ordering
    • 
 							
  • Multiple tables
    • 
 							
  • Hidden columns
    • 
-							
  • Complex headers (rowspan and
-							colspan)
    • 
+							
  • Complex headers (rowspan and colspan)
    • 
 							
  • DOM positioning
    • 
 							
  • Flexible table width
    • 
 							
  • State saving
    • 
@@ -187,8 +176,7 @@ $(document).ready(function() {
 							
  • Scroll - vertical
    • 
 							
  • Scroll - horizontal
    • 
 							
  • Scroll - horizontal and vertical
    • 
-							
  • Scroll - vertical with jQuery UI
-							ThemeRoller
    • 
+							
  • Scroll - vertical with jQuery UI ThemeRoller
    • 
 							
  • Language - Comma decimal place
    • 
 							
  • Language options
    • 
 						
@@ -201,10 +189,8 @@ $(document).ready(function() {
 							
  • DataTables events
    • 
 							
  • Column rendering
    • 
 							
  • Page length options
    • 
-							
  • Multiple table control
-							elements
    • 
-							
  • Complex headers (rowspan /
-							colspan)
    • 
+							
  • Multiple table control elements
    • 
+							
  • Complex headers (rowspan / colspan)
    • 
 							
  • Read HTML to data objects
    • 
 							
  • HTML5 data-* attributes
    • 
 							
  • Language file
    • 
@@ -213,8 +199,7 @@ $(document).ready(function() {
 							
  • Row grouping
    • 
 							
  • Footer callback
    • 
 							
  • Custom toolbar elements
    • 
-							
  • Order direction sequence
-							control
    • 
+							
  • Order direction sequence control
    •
    @@ -250,14 +235,11 @@ $(document).ready(function() { @@ -303,10 +284,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -314,14 +293,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/ajax/objects_subarrays.html b/examples/ajax/objects_subarrays.html index df7170f0..38509c50 100644 --- a/examples/ajax/objects_subarrays.html +++ b/examples/ajax/objects_subarrays.html @@ -41,34 +41,27 @@ $(document).ready(function() {

    DataTables example Nested object data (arrays)

    -

    The information read from an Ajax data source can be arbitrarily complex, but still be displayed by - DataTables through the columns.dataDT option, which is - particularly useful for working with JSON feeds in an already defined format.

    +

    The information read from an Ajax data source can be arbitrarily complex, but still be displayed by DataTables through the columns.dataDT option, which + is particularly useful for working with JSON feeds in an already defined format.

    The columns.dataDT option has the ability to - read information not only from objects, but also from arrays using the same dotted object syntax as for - objects. In addition to this, when working with an array data source columns.dataDT can process the data to - combine and display the data in simple forms (more complex forms can be defined by using columns.dataDT as a function).

    + "DataTables initialisation option">columns.dataDT     option has the ability to read information not only from objects, but also from arrays + using the same dotted object syntax as for objects. In addition to this, when working with an array data source columns.dataDT can process + the data to combine and display the data in simple forms (more complex forms can be defined by using columns.dataDT as a + function).

    -

    This example shows two different aspects of using This example shows two different aspects of using columns.dataDT to read arrays:

      -
    • The Name column is sourced from an array of two elements (first and last name), which - are automatically concatenated together. This is done by using array bracket syntax, with the - characters between the brackets being used as the glue between elements (e.g. name[, - ]).
      • -
    • The Position, Start date and Salary columns are read directly from - array elements using dotted object notation (e.g. hr.0). Note that the order in which - the data can be used in the columns does not have to match the order in which it is defined in the - data source. The structure of the row's data source in this example is:
      • +
    • The Name column is sourced from an array of two elements (first and last name), which are automatically concatenated together. This is done by + using array bracket syntax, with the characters between the brackets being used as the glue between elements (e.g. name[, ]).
      • +
    • The Position, Start date and Salary columns are read directly from array elements using dotted object notation (e.g. + hr.0). Note that the order in which the data can be used in the columns does not have to match the order in which it is defined in the data + source. The structure of the row's data source in this example is:
     {
@@ -122,8 +115,7 @@ $(document).ready(function() {
 
 			
    
 				
    
-					
    The Javascript shown below is used to initialise the table shown in this
-					example:
    $(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"ajax": "data/objects_subarrays.txt",
 		"columns": [
@@ -137,8 +129,7 @@ $(document).ready(function() {
 	} );
 } );
 
-					
    In addition to the above code, the following Javascript library files are loaded for use in this
-					example:
    
+					
    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:
    
+					
    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:
    
+						
    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:
    
+					
    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.
    
+					
    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.
    
 				
    
 
 				
    
-					
    The script used to perform the server-side processing for this table is shown below. Please note
-					that this is just an example script using PHP. Server-side processing scripts can be written in any
-					language, using the protocol described in the
-					DataTables documentation.
    
+					
    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using the protocol described in the DataTables
+					documentation.
    
 				
    
 			
    
 		
@@ -199,8 +185,7 @@ $(document).ready(function() {
 							
  • Multi-column ordering
    • 
 							
  • Multiple tables
    • 
 							
  • Hidden columns
    • 
-							
  • Complex headers (rowspan and
-							colspan)
    • 
+							
  • Complex headers (rowspan and colspan)
    • 
 							
  • DOM positioning
    • 
 							
  • Flexible table width
    • 
 							
  • State saving
    • 
@@ -208,8 +193,7 @@ $(document).ready(function() {
 							
  • Scroll - vertical
    • 
 							
  • Scroll - horizontal
    • 
 							
  • Scroll - horizontal and vertical
    • 
-							
  • Scroll - vertical with jQuery UI
-							ThemeRoller
    • 
+							
  • Scroll - vertical with jQuery UI ThemeRoller
    • 
 							
  • Language - Comma decimal place
    • 
 							
  • Language options
    • 
 						
@@ -222,10 +206,8 @@ $(document).ready(function() {
 							
  • DataTables events
    • 
 							
  • Column rendering
    • 
 							
  • Page length options
    • 
-							
  • Multiple table control
-							elements
    • 
-							
  • Complex headers (rowspan /
-							colspan)
    • 
+							
  • Multiple table control elements
    • 
+							
  • Complex headers (rowspan / colspan)
    • 
 							
  • Read HTML to data objects
    • 
 							
  • HTML5 data-* attributes
    • 
 							
  • Language file
    • 
@@ -234,8 +216,7 @@ $(document).ready(function() {
 							
  • Row grouping
    • 
 							
  • Footer callback
    • 
 							
  • Custom toolbar elements
    • 
-							
  • Order direction sequence
-							control
    • 
+							
  • Order direction sequence control
    •
    @@ -271,14 +252,11 @@ $(document).ready(function() { @@ -324,10 +301,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -335,14 +310,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/ajax/orthogonal-data.html b/examples/ajax/orthogonal-data.html index 4adf7d4c..6762437c 100644 --- a/examples/ajax/orthogonal-data.html +++ b/examples/ajax/orthogonal-data.html @@ -44,19 +44,16 @@ $(document).ready(function() {

    DataTables example Orthogonal data

    -

    To try and make life easy, by default, DataTables expects arrays to be used as the data source for - rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects - as the data source for each row (i.e. each row has its data described by an object) as this can make - working with the data much more understandable, particularly if you are using the API and you don't - need to keep track of array indexes.

    +

    To try and make life easy, by default, DataTables expects arrays to be used as the data source for rows in the table. However, this isn't always useful, and you + may wish to have DataTables use objects as the data source for each row (i.e. each row has its data described by an object) as this can make working with the data + much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.

    -

    This can be done quite simply by using the columns.dataDT option which you use to tell - DataTables which property to use from the data source object for each column.

    +

    This can be done quite simply by using the columns.dataDT option which you use to tell DataTables which property to use from the data source object + for each column.

    -

    In this example the Ajax source returns an array of objects, which DataTables uses to display the - table. The structure of the row's data source in this example is:

    +

    In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example + is:

     {
 	"name":	   "Tiger Nixon",
@@ -107,8 +104,7 @@ $(document).ready(function() {
 
 			
    
 				
    
-					
    The Javascript shown below is used to initialise the table shown in this
-					example:
    $(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		ajax: "data/orthogonal.txt",
 		columns: [
@@ -125,8 +121,7 @@ $(document).ready(function() {
 	} );
 } );
 
-					
    In addition to the above code, the following Javascript library files are loaded for use in this
-					example:
    
+					
    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:
    
+					
    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:
    
+						
    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:
    
+					
    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.
    
+					
    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.
    
 				
    
 
 				
    
-					
    The script used to perform the server-side processing for this table is shown below. Please note
-					that this is just an example script using PHP. Server-side processing scripts can be written in any
-					language, using the protocol described in the
-					DataTables documentation.
    
+					
    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using the protocol described in the DataTables
+					documentation.
    
 				
    
 			
    
 		
@@ -187,8 +177,7 @@ $(document).ready(function() {
 							
  • Multi-column ordering
    • 
 							
  • Multiple tables
    • 
 							
  • Hidden columns
    • 
-							
  • Complex headers (rowspan and
-							colspan)
    • 
+							
  • Complex headers (rowspan and colspan)
    • 
 							
  • DOM positioning
    • 
 							
  • Flexible table width
    • 
 							
  • State saving
    • 
@@ -196,8 +185,7 @@ $(document).ready(function() {
 							
  • Scroll - vertical
    • 
 							
  • Scroll - horizontal
    • 
 							
  • Scroll - horizontal and vertical
    • 
-							
  • Scroll - vertical with jQuery UI
-							ThemeRoller
    • 
+							
  • Scroll - vertical with jQuery UI ThemeRoller
    • 
 							
  • Language - Comma decimal place
    • 
 							
  • Language options
    • 
 						
@@ -210,10 +198,8 @@ $(document).ready(function() {
 							
  • DataTables events
    • 
 							
  • Column rendering
    • 
 							
  • Page length options
    • 
-							
  • Multiple table control
-							elements
    • 
-							
  • Complex headers (rowspan /
-							colspan)
    • 
+							
  • Multiple table control elements
    • 
+							
  • Complex headers (rowspan / colspan)
    • 
 							
  • Read HTML to data objects
    • 
 							
  • HTML5 data-* attributes
    • 
 							
  • Language file
    • 
@@ -222,8 +208,7 @@ $(document).ready(function() {
 							
  • Row grouping
    • 
 							
  • Footer callback
    • 
 							
  • Custom toolbar elements
    • 
-							
  • Order direction sequence
-							control
    • 
+							
  • Order direction sequence control
    •
    @@ -259,14 +244,11 @@ $(document).ready(function() { @@ -312,10 +293,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -323,14 +302,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/ajax/simple.html b/examples/ajax/simple.html index be93c32d..b870e50d 100644 --- a/examples/ajax/simple.html +++ b/examples/ajax/simple.html @@ -33,28 +33,20 @@ $(document).ready(function() {

    DataTables example Ajax data source (arrays)

    -

    DataTables has the ability to read data from virtually any JSON data source that can be obtained by - Ajax. This can be done, in its most simple form, by setting the ajaxDT option to the address of the JSON - data source.

    +

    DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting + the ajaxDT option to the + address of the JSON data source.

    -

    The ajaxDT option also allows for more advanced - configuration such as altering how the Ajax request is made. See the ajaxDT documentation or the other Ajax - examples for DataTables for further information.

    +

    The ajaxDT option also + allows for more advanced configuration such as altering how the Ajax request is made. See the ajaxDT documentation or the other Ajax examples for DataTables for further information.

    -

    By default DataTables will assume that an array data source is to be used and will read the - information to be displayed in each column from the row's array using the column index, making working - with arrays very simple (note that this can be changed, or objects used may using the columns.dataDT option, shown in other - examples).

    +

    By default DataTables will assume that an array data source is to be used and will read the information to be displayed in each column from the row's array + using the column index, making working with arrays very simple (note that this can be changed, or objects used may using the columns.dataDT option, shown + in other examples).

    -

    The example below shows DataTables loading data for a table from arrays as the data source, where - the structure of the row's data source in this example is:

    +

    The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:

     [
 	"Tiger Nixon",
@@ -102,15 +94,13 @@ $(document).ready(function() {
 
 			
    
 				
    
-					
    The Javascript shown below is used to initialise the table shown in this
-					example:
    $(document).ready(function() {
+					
    The Javascript shown below is used to initialise the table shown in this example:
    $(document).ready(function() {
 	$('#example').dataTable( {
 		"ajax": "data/arrays.txt"
 	} );
 } );
 
-					
    In addition to the above code, the following Javascript library files are loaded for use in this
-					example:
    
+					
    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:
    
+					
    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:
    
+						
    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:
    
+					
    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.
    
+					
    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.
    
 				
    
 
 				
    
-					
    The script used to perform the server-side processing for this table is shown below. Please note
-					that this is just an example script using PHP. Server-side processing scripts can be written in any
-					language, using the protocol described in the
-					DataTables documentation.
    
+					
    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using the protocol described in the DataTables
+					documentation.
    
 				
    
 			
    
 		
@@ -171,8 +156,7 @@ $(document).ready(function() {
 							
  • Multi-column ordering
    • 
 							
  • Multiple tables
    • 
 							
  • Hidden columns
    • 
-							
  • Complex headers (rowspan and
-							colspan)
    • 
+							
  • Complex headers (rowspan and colspan)
    • 
 							
  • DOM positioning
    • 
 							
  • Flexible table width
    • 
 							
  • State saving
    • 
@@ -180,8 +164,7 @@ $(document).ready(function() {
 							
  • Scroll - vertical
    • 
 							
  • Scroll - horizontal
    • 
 							
  • Scroll - horizontal and vertical
    • 
-							
  • Scroll - vertical with jQuery UI
-							ThemeRoller
    • 
+							
  • Scroll - vertical with jQuery UI ThemeRoller
    • 
 							
  • Language - Comma decimal place
    • 
 							
  • Language options
    • 
 						
@@ -194,10 +177,8 @@ $(document).ready(function() {
 							
  • DataTables events
    • 
 							
  • Column rendering
    • 
 							
  • Page length options
    • 
-							
  • Multiple table control
-							elements
    • 
-							
  • Complex headers (rowspan /
-							colspan)
    • 
+							
  • Multiple table control elements
    • 
+							
  • Complex headers (rowspan / colspan)
    • 
 							
  • Read HTML to data objects
    • 
 							
  • HTML5 data-* attributes
    • 
 							
  • Language file
    • 
@@ -206,8 +187,7 @@ $(document).ready(function() {
 							
  • Row grouping
    • 
 							
  • Footer callback
    • 
 							
  • Custom toolbar elements
    • 
-							
  • Order direction sequence
-							control
    • 
+							
  • Order direction sequence control
    •
    @@ -243,14 +223,11 @@ $(document).ready(function() { @@ -296,10 +272,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -307,14 +281,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/api/add_row.html b/examples/api/add_row.html index a716e9e2..d449c491 100644 --- a/examples/api/add_row.html +++ b/examples/api/add_row.html @@ -49,17 +49,13 @@ $(document).ready(function() {

    DataTables example Add rows

    -

    New rows can be added to a DataTable very easily using the row.add()DT API method. Simply call the API function - with the data that is to be used for the new row (be it an array or object). Multiple rows can be added - using the New rows can be added to a DataTable very easily using the row.add()DT API method. Simply call the API function with the data that is to be used for the new row (be it an + array or object). Multiple rows can be added using the rows.add()DT method (note the plural).

    -

    Note that in order to see the new row in the table you must call the draw()DT method, which is easily done through the - chaining that the DataTables API makes use of.

    +

    Note that in order to see the new row in the table you must call the draw()DT method, which is easily done through the chaining that the DataTables API makes use of.

    This example shows a single row being added each time the button below is clicked upon.

    @@ -96,8 +92,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { var t = $('#example').DataTable(); var counter = 1; @@ -117,8 +112,7 @@ $(document).ready(function() { $('#addRow').click(); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -179,8 +168,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -188,8 +176,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -202,10 +189,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -214,8 +199,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -251,8 +235,7 @@ $(document).ready(function() { @@ -302,10 +284,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -313,14 +293,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/api/api_in_init.html b/examples/api/api_in_init.html index 29d90b8b..f9279c0f 100644 --- a/examples/api/api_in_init.html +++ b/examples/api/api_in_init.html @@ -40,26 +40,20 @@ $(document).ready(function() {

    DataTables example Using API in callbacks

    -

    There are times when you may wish to call API functions inside the DataTables callback functions - (for example initCompleteDT, rowCallbackDT etc). The complicating issue - with this is that the object hasn't fully initialised, so you can't assign the result to a variable and - then use that variable in the callback. However, all of DataTables' callback functions are executed in - the scope of the DataTable instance, so you can use the Javascript special variable this - to access the API (this.api() will give an API instance) as this is the - table node.

    +

    There are times when you may wish to call API functions inside the DataTables callback functions (for example initCompleteDT, rowCallbackDT etc). The + complicating issue with this is that the object hasn't fully initialised, so you can't assign the result to a variable and then use that variable in the callback. + However, all of DataTables' callback functions are executed in the scope of the DataTable instance, so you can use the Javascript special variable + this to access the API (this.api() will give an API instance) as this is the table + node.

    -

    In this example you will be able to see that the $()DT method is used to get all cell nodes in the - table's body and then act on them (in this case adding a click event). The action here is to apply a - filter to the table with the value of what is in each cell.

    +

    In this example you will be able to see that the $()DT method is used to get all cell nodes in the table's body and then act on them (in this case adding a click + event). The action here is to apply a filter to the table with the value of what is in each cell.

    -

    It is also worth noting that this same effect could be achieved by attaching a delegated click event - after the table has been initialised - but the example shows the use of the API inside the - callbacks!

    +

    It is also worth noting that this same effect could be achieved by attaching a delegated click event after the table has been initialised - but the example + shows the use of the API inside the callbacks!

    @@ -555,8 +549,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').dataTable( { "initComplete": function () { var api = this.api(); @@ -567,8 +560,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -629,8 +616,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -638,8 +624,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -652,10 +637,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -664,8 +647,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -701,8 +683,7 @@ $(document).ready(function() { @@ -752,10 +732,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -763,14 +741,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/api/counter_columns.html b/examples/api/counter_columns.html index d54a6586..b8069d99 100644 --- a/examples/api/counter_columns.html +++ b/examples/api/counter_columns.html @@ -46,23 +46,17 @@ $(document).ready(function() {

    DataTables example Index column

    -

    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 ordering and searching applied to the table is altered by the end user.

    +

    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 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 ordering or searching occurs. This is done by listening for the orderDT and searchDT events emitted by the table. When these events are - detected the column().nodes()DT 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 column()DT method to get the nodes in the current order - and with the currently applied filter.

    +

    This example shows how this can be achieved with DataTables, where the first column is the counter column, and is updated when ordering or searching occurs. + This is done by listening for the orderDT and + searchDT events emitted by the table. When + these events are detected the column().nodes()DT 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 + column()DT method to get the nodes in the + current order and with the currently applied filter.

    @@ -558,8 +552,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { var t = $('#example').DataTable( { "columnDefs": [ { "searchable": false, @@ -576,8 +569,7 @@ $(document).ready(function() { } ).draw(); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -638,8 +625,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -647,8 +633,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -661,10 +646,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -673,8 +656,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -710,8 +692,7 @@ $(document).ready(function() { @@ -761,10 +741,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -772,14 +750,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/api/form.html b/examples/api/form.html index 2621e299..9e5010ab 100644 --- a/examples/api/form.html +++ b/examples/api/form.html @@ -42,21 +42,16 @@ $(document).ready(function() {

    DataTables example Form inputs

    -

    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.

    +

    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 $()DT method can be used to get nodes from the document - regardless of paging, ordering etc. This example shows $()DT being used to get all input elements from the table.

    +

    The $()DT method can be used to get nodes + from the document regardless of paging, ordering etc. This example shows $()DT 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.

    +

    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.

    @@ -134,8 +129,7 @@ $(document).ready(function() { - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - + - +
    Ashton Cox
    Cedric Kelly
    Brielle Williamson
    Rhona Davidson
    Colleen Hurst
    Sonya Frost
    Charde Marshall
    Haley Kennedy
    Tatyana Fitzpatrick
    Michael Silva
    Paul Byrd
    Gloria Little
    Bradley Greer
    Jenette Caldwell
    Yuri Berry
    Caesar Vance
    Doris Wilder
    Angelica Ramos
    Jennifer Chang
    Brenden Wagner
    Fiona Green
    Shou Itou
    Michelle House
    Prescott Bartlett
    Martena Mccray
    Unity Butler
    Vivian Harrell
    Olivia Liang
    Bruno Nash
    Sakura Yamamoto
    Finn Camacho
    Serge Baldwin
    Zenaida Frank
    Zorita Serrano
    Jennifer Acosta
    Cara Stevens
    Hermione Butler
    Lael Greer
    Shad Decker
    Michael Bruce
    Donna Snider @@ -561,8 +556,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { var lastIdx = null; var table = $('#example').DataTable(); @@ -580,8 +574,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    td.highlight { +

    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:

    td.highlight { background-color: whitesmoke !important; }
    -

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

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -644,8 +632,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -653,8 +640,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -667,10 +653,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -679,8 +663,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -716,8 +699,7 @@ $(document).ready(function() { @@ -767,10 +748,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -778,14 +757,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/api/index.html b/examples/api/index.html index cb8c820c..eec06381 100644 --- a/examples/api/index.html +++ b/examples/api/index.html @@ -19,9 +19,8 @@

    DataTables example API

    -

    The real power of DataTables can be exploited through the use of the API that it presents. The - DataTables API is designed to be simple, consistent and easy to use. The examples in this section show - how the API may be used.

    +

    The real power of DataTables can be exploited through the use of the API that it presents. The DataTables API is designed to be simple, consistent and easy to + use. The examples in this section show how the API may be used.

    @@ -37,8 +36,7 @@
    • Add rows
    • Individual column searching (text inputs)
      • -
    • Individual column searching (select - inputs)
      • +
    • Individual column searching (select inputs)
    • Highlighting rows and columns
    • Child rows (show extra / detailed information)
    • Row selection (multiple rows)
      • @@ -54,14 +52,11 @@
      -

      Please refer to the DataTables documentation for full - information about its API properties and methods.
      - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

      +

      Please refer to the DataTables documentation for full information about its API properties and methods.
      + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

      -

      DataTables designed and created by SpryMedia Ltd © 2007-2014
      +

      DataTables designed and created by SpryMedia Ltd © 2007-2014
      DataTables is licensed under the MIT license.

      diff --git a/examples/api/multi_filter.html b/examples/api/multi_filter.html index cc0dfbd6..3d4a6a85 100644 --- a/examples/api/multi_filter.html +++ b/examples/api/multi_filter.html @@ -56,28 +56,21 @@ $(document).ready(function() {

      DataTables example Individual column searching (text inputs)

      -

      The searching functionality that is provided by DataTables is very useful for quickly search through - the information in the table - however the search is global, and you may wish to present controls to - search on specific columns only.

      +

      The searching functionality that is provided by DataTables is very useful for quickly search through the information in the table - however the search is + global, and you may wish to present controls to search on specific columns only.

      -

      DataTables has the ability to apply searching to a specific column through the column().search()DT method (note that the name of the - method is search not filter since filter()DT is used to apply a filter to a result - set).

      +

      DataTables has the ability to apply searching to a specific column through the column().search()DT method (note that the name of the method is search not filter + since filter()DT is used to apply a + filter to a result set).

      -

      The column searches are cumulative, so you can apply multiple individual column searchs, in addition - to the global search, allowing complex searching options to be presented to the user.

      +

      The column searches are cumulative, so you can apply multiple individual column searchs, in addition to the global search, allowing complex searching options to + be presented to the user.

      -

      This examples shows text elements being used with the column().search()DT method to add input controls in the - footer of the table for each column. Note that the *index*:visible option is used for the - column selector to ensure that the column()DT method takes into account any hidden - columns when selecting the column to act upon.

      +

      This examples shows text elements being used with the column().search()DT method to add input controls in the footer of the table for each column. Note that the + *index*:visible option is used for the column selector to ensure that the column()DT method takes into account any hidden columns when selecting the column to act upon.

    @@ -573,8 +566,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { // Setup - add a text input to each footer cell $('#example tfoot th').each( function () { var title = $('#example thead th').eq( $(this).index() ).text(); @@ -595,8 +587,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    tfoot input { +

    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:

    tfoot input { width: 100%; padding: 3px; box-sizing: border-box; }
    -

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

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -661,8 +647,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -670,8 +655,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -684,10 +668,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -696,8 +678,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -732,10 +713,8 @@ $(document).ready(function() {

    API

    @@ -785,10 +763,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -796,14 +772,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/api/multi_filter_select.html b/examples/api/multi_filter_select.html index bed4a25c..130dcb50 100644 --- a/examples/api/multi_filter_select.html +++ b/examples/api/multi_filter_select.html @@ -56,43 +56,31 @@ $(document).ready(function() {

    DataTables example Individual column searching (select inputs)

    -

    This example is almost identical to text based individual column example and provides the same - functionality, but in this case using select input - controls.

    +

    This example is almost identical to text based individual column example and provides the same functionality, but in this case using select input controls.

    -

    After the table is initialised, the API is used to build the select inputs through the use of the column().data()DT method to get the data for each - column in turn. The helper methods unique()DT and sort()DT are also used to reduce the data for set input - to unique and ordered elements. Finally the change event from the select input is used to trigger a column search using the column().search()DT method.

    +

    After the table is initialised, the API is used to build the select inputs through the use of the column().data()DT method to get the data + for each column in turn. The helper methods unique()DT and sort()DT are also used to reduce the data for set input to unique and ordered elements. Finally the + change event from the select input is used to trigger a column search using the column().search()DT method.

    Note that the column().search()DT method in this particular case - performs an exact match through the use of a custom regular expression and disabling DataTables built - in smart searching. For more information on the search options in DataTables API please refer to the - documentation for search()DT, column().search()DT and column().search()DT method in this particular case performs an exact match through the use of a custom regular + expression and disabling DataTables built in smart searching. For more information on the search options in DataTables API please refer to the documentation for + search()DT, column().search()DT and $.fn.dataTable.util.escapeRegex()DT which are used for - searching globally, by column and escaping regular expressions respectively.

    + "DataTables API method">$.fn.dataTable.util.escapeRegex()DT     which are used for searching globally, by column and escaping regular + expressions respectively.

    -

    Note also that this example shows the use of initCompleteDT a callback function that is - triggered when the table has fully loaded. Use of this callback isn't actually required in this example - since the data is available in the table on load, but in the case of Ajax loaded data, initCompleteDT is useful to execute code - after the data has been loaded.

    +

    Note also that this example shows the use of initCompleteDT a callback function that is triggered when the table has fully loaded. Use of this + callback isn't actually required in this example since the data is available in the table on load, but in the case of Ajax loaded data, initCompleteDT is useful to + execute code after the data has been loaded.

    @@ -588,8 +576,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { $('#example').DataTable( { initComplete: function () { var api = this.api(); @@ -616,8 +603,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -678,8 +659,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -687,8 +667,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -701,10 +680,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -713,8 +690,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -750,8 +726,7 @@ $(document).ready(function() { @@ -801,10 +775,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -812,14 +784,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/api/regex.html b/examples/api/regex.html index 454195f0..f613b456 100644 --- a/examples/api/regex.html +++ b/examples/api/regex.html @@ -57,21 +57,17 @@ $(document).ready(function() {

    DataTables example Search API (regular expressions)

    -

    Searching a table is one of the most common user interactions with a DataTables table, and - DataTables provides a number of methods for you to control this interaction. There are APIs for the - global search (search()DT) and for each individual column (column().search()DT).

    +

    Searching a table is one of the most common user interactions with a DataTables table, and DataTables provides a number of methods for you to control this + interaction. There are APIs for the global search (search()DT) and for each individual column (column().search()DT).

    -

    Note also that you must call the draw()DT method after performing the search, in - order for the results to be displayed.

    +

    Note also that you must call the draw()DT method after performing the search, in order for the results to be displayed.

    -

    Each search (global or column) can be marked as a regular expression (allowing you to create very - complex interactions) and as a smart search or not. When smart searching is enabled on a particular - search, DataTables will modify the user input string to a complex regular expression which can make - searching more intuitive.

    +

    Each search (global or column) can be marked as a regular expression (allowing you to create very complex interactions) and as a smart search or not. When smart + searching is enabled on a particular search, DataTables will modify the user input string to a complex regular expression which can make searching more + intuitive.

    This example allows you to "play" with the various searching options that DataTables provides.

    @@ -91,50 +87,43 @@ $(document).ready(function() {     - + - + - + - + - + - + - +
    Global search
    Column - Name
    Column - Position
    Column - Office
    Column - Age
    Column - Start date
    Column - Salary
    @@ -632,8 +621,7 @@ $(document).ready(function() {
    -

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

    function filterGlobal () { +

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

    function filterGlobal () { $('#example').DataTable().search( $('#global_filter').val(), $('#global_regex').prop('checked'), @@ -661,8 +649,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -723,8 +705,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -732,8 +713,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -746,10 +726,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -758,8 +736,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -795,8 +772,7 @@ $(document).ready(function() { @@ -846,10 +821,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -857,14 +830,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/api/row_details.html b/examples/api/row_details.html index 83d2fcbb..5b280887 100644 --- a/examples/api/row_details.html +++ b/examples/api/row_details.html @@ -92,20 +92,15 @@ $(document).ready(function() {

    DataTables example Child rows (show extra / detailed information)

    -

    The DataTables API has a number of methods available for attaching child rows to a parent - row in the DataTable. This can be used to show additional information about a row, useful for cases - where you wish to convey more information about a row than there is space for in the host table.

    +

    The DataTables API has a number of methods available for attaching child rows to a parent row in the DataTable. This can be used to show additional + information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.

    -

    The example below makes use of the row().childDT methods to firstly check if a - row is already displayed, and if so hide it (row().child.hide()DT), otherwise show it (row().child.show()DT). The content of the child row is, - in this example, defined by the formatDetails() function, but you would replace that with - whatever you wanted to show the content required, possibly including, for example, an Ajax call to the - server to obtain the extra information to show.

    +

    The example below makes use of the row().childDT methods to firstly check if a row is already displayed, and if so hide it (row().child.hide()DT), otherwise show + it (row().child.show()DT). The + content of the child row is, in this example, defined by the formatDetails() function, but you would replace that with whatever you wanted to show the + content required, possibly including, for example, an Ajax call to the server to obtain the extra information to show.

    @@ -140,8 +135,7 @@ $(document).ready(function() {
    -

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

    /* Formatting function for row details - modify as you need */ +

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

    /* Formatting function for row details - modify as you need */ function format ( d ) { // `d` is the original data object for the row return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+ @@ -196,8 +190,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    td.details-control { +

    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:

    td.details-control { background: url('../resources/details_open.png') no-repeat center center; cursor: pointer; } @@ -223,25 +214,22 @@ tr.shown td.details-control { }
    -

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

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -264,8 +252,7 @@ tr.shown td.details-control {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -273,8 +260,7 @@ tr.shown td.details-control {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -287,10 +273,8 @@ tr.shown td.details-control {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -299,8 +283,7 @@ tr.shown td.details-control {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -336,11 +319,9 @@ tr.shown td.details-control { @@ -388,10 +368,8 @@ tr.shown td.details-control {

    Plug-ins

    @@ -399,14 +377,11 @@ tr.shown td.details-control {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/api/select_row.html b/examples/api/select_row.html index d033d5ad..73c697a6 100644 --- a/examples/api/select_row.html +++ b/examples/api/select_row.html @@ -41,16 +41,13 @@ $(document).ready(function() {

    DataTables example Row selection (multiple rows)

    -

    It can be quite useful at times to provide the user with the option to select rows in a DataTable. - This can be done by simply using a click event to add / remove a class on the table rows. The rows().data()DT method can then be used to get the data - for the selected rows. In this case it is simply counting the number of selected rows, but much more - complex interactions can easily be developed.

    +

    It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done by simply using a click event to add / + remove a class on the table rows. The rows().data()DT method can then be used to get the data for the selected rows. In this case it is simply counting + the number of selected rows, but much more complex interactions can easily be developed.

    -

    If you are looking for a more complete row selection option TableTools for DataTables provides a complete API for - selecting rows and acting upon those selected rows.

    +

    If you are looking for a more complete row selection option TableTools for DataTables provides a complete + API for selecting rows and acting upon those selected rows.

    @@ -546,8 +543,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { var table = $('#example').DataTable(); $('#example tbody').on( 'click', 'tr', function () { @@ -559,8 +555,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -621,8 +611,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -630,8 +619,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -644,10 +632,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -656,8 +642,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -693,8 +678,7 @@ $(document).ready(function() { @@ -744,10 +727,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -755,14 +736,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/api/select_single_row.html b/examples/api/select_single_row.html index 7976cfcc..a5e1b8a5 100644 --- a/examples/api/select_single_row.html +++ b/examples/api/select_single_row.html @@ -47,21 +47,17 @@ $(document).ready(function() {

    DataTables example Row selection and deletion (single row)

    -

    This example shows a modification of the multiple row selection example, where just a single can now - be selected. This is done simply by checking to see if the row already has a selected class or not, and - if so removing it, if not then the class is removed from any other row in the table which does have it - and applied to the row to be selected.

    +

    This example shows a modification of the multiple row selection example, where just a single can now be selected. This is done simply by checking to see if the + row already has a selected class or not, and if so removing it, if not then the class is removed from any other row in the table which does have it and applied to + the row to be selected.

    Also shown is the row().remove()DT method which will delete a row from a - table, and the draw()DT method with false as its first - parameter. This will redraw the table keeping the current paging (without the false - parameter the paging would be reset to the first page).

    + "DataTables API method">row().remove()DT     method which will delete a row from a table, and the draw()DT method with false as its + first parameter. This will redraw the table keeping the current paging (without the false parameter the paging would be reset to the first page).

    -

    If you are looking for a more complete row selection option TableTools for DataTables provides a complete API for - selecting rows and acting upon those selected rows.

    +

    If you are looking for a more complete row selection option TableTools for DataTables provides a complete + API for selecting rows and acting upon those selected rows.

    @@ -557,8 +553,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { var table = $('#example').DataTable(); $('#example tbody').on( 'click', 'tr', function () { @@ -576,8 +571,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -638,8 +627,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -647,8 +635,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -661,10 +648,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -673,8 +658,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -710,13 +694,11 @@ $(document).ready(function() { @@ -762,10 +743,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -773,14 +752,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/api/show_hide.html b/examples/api/show_hide.html index 6e32fb59..9df9b07b 100644 --- a/examples/api/show_hide.html +++ b/examples/api/show_hide.html @@ -46,28 +46,23 @@ $(document).ready(function() {

    DataTables example Show / hide columns dynamically

    -

    This example shows how you can make use of the column().visible()DT API method to dynamically show and - hide columns in a table. Also included here is scrolling, just to show it enabled with this API method, - although that is not required for the API function to work.

    +

    This example shows how you can make use of the column().visible()DT API method to dynamically show and hide columns in a table. Also included here is scrolling, + just to show it enabled with this API method, although that is not required for the API function to work.

    -

    In addition to this, groups of columns can be shown and hidden at the same time using the columns()DT method to select multiple columns and then - using the columns().visible()DT method to set their state.

    +

    In addition to this, groups of columns can be shown and hidden at the same time using the columns()DT method to select multiple columns and then using the columns().visible()DT method to set + their state.

    -

    If you are looking for a more complete column visibility interaction controls ColVis for DataTables provides a complete interface for - allowing the user to show and hide columns in the table.

    +

    If you are looking for a more complete column visibility interaction controls ColVis for DataTables provides a + complete interface for allowing the user to show and hide columns in the table.

    - Toggle column: Name - Position - Office - Age - Start date - Salary + Toggle column: Name - Position - Office - Age - Start date - Salary
    @@ -563,8 +558,7 @@ $(document).ready(function() {
    -

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

    $(document).ready(function() { +

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

    $(document).ready(function() { var table = $('#example').DataTable( { "scrollY": "200px", "paging": false @@ -581,8 +575,7 @@ $(document).ready(function() { } ); } ); -

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

    +

    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:

    +

    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:

    +

    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:

    +

    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.

    +

    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.

    -

    The script used to perform the server-side processing for this table is shown below. Please note - that this is just an example script using PHP. Server-side processing scripts can be written in any - language, using the protocol described in the - DataTables documentation.

    +

    The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side + processing scripts can be written in any language, using the protocol described in the DataTables + documentation.

    @@ -643,8 +631,7 @@ $(document).ready(function() {
  • Multi-column ordering
  • Multiple tables
  • Hidden columns
    • -
  • Complex headers (rowspan and - colspan)
    • +
  • Complex headers (rowspan and colspan)
  • DOM positioning
  • Flexible table width
  • State saving
    • @@ -652,8 +639,7 @@ $(document).ready(function() {
  • Scroll - vertical
  • Scroll - horizontal
  • Scroll - horizontal and vertical
    • -
  • Scroll - vertical with jQuery UI - ThemeRoller
    • +
  • Scroll - vertical with jQuery UI ThemeRoller
  • Language - Comma decimal place
  • Language options
    • @@ -666,10 +652,8 @@ $(document).ready(function() {
  • DataTables events
  • Column rendering
  • Page length options
    • -
  • Multiple table control - elements
    • -
  • Complex headers (rowspan / - colspan)
    • +
  • Multiple table control elements
    • +
  • Complex headers (rowspan / colspan)
  • Read HTML to data objects
  • HTML5 data-* attributes
  • Language file
    • @@ -678,8 +662,7 @@ $(document).ready(function() {
  • Row grouping
  • Footer callback
  • Custom toolbar elements
    • -
  • Order direction sequence - control
    • +
  • Order direction sequence control
    • @@ -715,8 +698,7 @@ $(document).ready(function() { @@ -766,10 +747,8 @@ $(document).ready(function() {

    Plug-ins

    @@ -777,14 +756,11 @@ $(document).ready(function() {
    -

    Please refer to the DataTables documentation for full - information about its API properties and methods.
    - Additionally, there are a wide range of extras and - plug-ins which extend the capabilities of - DataTables.

    +

    Please refer to the DataTables documentation for full information about its API properties and methods.
    + Additionally, there are a wide range of extras and plug-ins + which extend the capabilities of DataTables.

    -

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    +

    DataTables designed and created by SpryMedia Ltd © 2007-2014
    DataTables is licensed under the MIT license.

    diff --git a/examples/api/tabs_and_scrolling.html b/examples/api/tabs_and_scrolling.html index 59668119..0403d0e1 100644 --- a/examples/api/tabs_and_scrolling.html +++ b/examples/api/tabs_and_scrolling.html @@ -7,8 +7,7 @@ DataTables example - Scrolling and jQuery UI tabs - + - + - + - +