From 321be3bdb33033c7bced7a02843f23861051d090 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Fri, 2 Dec 2016 16:46:11 +0000 Subject: [PATCH] Remove prefixed -moz-box-sizing (not needed since ff 29) https://developer.mozilla.org/en-US/Firefox/Releases/29 --- .datatables-commit-sync | 2 +- examples/advanced_init/column_render.html | 1071 ++---- examples/advanced_init/complex_header.html | 1082 ++----- examples/advanced_init/defaults.html | 1069 ++---- .../advanced_init/dom_multiple_elements.html | 1073 ++---- examples/advanced_init/dom_toolbar.html | 1077 ++---- examples/advanced_init/dt_events.html | 1076 ++---- examples/advanced_init/events_live.html | 1070 ++---- examples/advanced_init/footer_callback.html | 1010 ++---- .../advanced_init/html5-data-attributes.html | 1083 ++----- .../advanced_init/html5-data-options.html | 1562 ++++----- examples/advanced_init/index.html | 153 +- examples/advanced_init/language_file.html | 1069 ++---- examples/advanced_init/length_menu.html | 1078 ++----- examples/advanced_init/object_dom_read.html | 1099 ++----- examples/advanced_init/row_callback.html | 1070 ++---- examples/advanced_init/row_grouping.html | 1070 ++---- .../advanced_init/sort_direction_control.html | 1088 ++----- examples/ajax/custom_data_flat.html | 626 ++-- examples/ajax/custom_data_property.html | 629 ++-- examples/ajax/data/orthogonal.txt | 60 +- examples/ajax/deep.html | 644 ++-- examples/ajax/defer_render.html | 617 ++-- examples/ajax/index.html | 124 +- examples/ajax/null_data_source.html | 630 ++-- examples/ajax/objects.html | 638 ++-- examples/ajax/objects_subarrays.html | 660 ++-- examples/ajax/orthogonal-data.html | 641 ++-- examples/ajax/simple.html | 643 ++-- examples/api/add_row.html | 619 ++-- examples/api/api_in_init.html | 1077 ++---- examples/api/counter_columns.html | 1073 ++---- examples/api/form.html | 1869 ++--------- examples/api/highlight.html | 1071 ++---- examples/api/index.html | 136 +- examples/api/multi_filter.html | 1079 ++----- examples/api/multi_filter_select.html | 1088 ++----- examples/api/regex.html | 1185 ++----- examples/api/row_details.html | 612 ++-- examples/api/select_row.html | 1070 ++---- examples/api/select_single_row.html | 1075 ++---- examples/api/show_hide.html | 1087 ++----- examples/api/tabs_and_scrolling.html | 687 ++-- examples/basic_init/alt_pagination.html | 1094 ++----- examples/basic_init/comma-decimal.html | 1080 ++----- examples/basic_init/complex_header.html | 1076 ++---- examples/basic_init/dom.html | 1178 ++----- examples/basic_init/filter_only.html | 1067 ++---- examples/basic_init/flexible_width.html | 1070 ++---- examples/basic_init/hidden_columns.html | 1077 ++---- examples/basic_init/index.html | 152 +- examples/basic_init/language.html | 1067 ++---- examples/basic_init/multi_col_sort.html | 1019 ++---- examples/basic_init/multiple_tables.html | 784 ++--- examples/basic_init/scroll_x.html | 1234 ++----- examples/basic_init/scroll_xy.html | 1228 ++----- examples/basic_init/scroll_y.html | 1076 ++---- examples/basic_init/scroll_y_dynamic.html | 1070 ++---- examples/basic_init/state_save.html | 1081 ++----- examples/basic_init/table_sorting.html | 1074 ++---- examples/basic_init/zero_configuration.html | 1067 ++---- examples/data_sources/ajax.html | 616 ++-- examples/data_sources/dom.html | 1068 ++---- examples/data_sources/index.html | 116 +- examples/data_sources/js_array.html | 593 ++-- examples/data_sources/server_side.html | 617 ++-- examples/index.html | 485 +-- examples/plug-ins/api.html | 1074 ++---- examples/plug-ins/dom_sort.html | 1870 ++--------- examples/plug-ins/index.html | 108 +- examples/plug-ins/range_filtering.html | 1087 ++----- examples/plug-ins/sorting_auto.html | 1075 ++---- examples/plug-ins/sorting_manual.html | 1077 ++---- examples/resources/syntax/shCore.css | 12 +- examples/server_side/custom_vars.html | 619 ++-- examples/server_side/defer_loading.html | 777 ++--- examples/server_side/ids.html | 615 ++-- examples/server_side/index.html | 134 +- examples/server_side/jsonp.html | 618 ++-- examples/server_side/object_data.html | 612 ++-- examples/server_side/pipeline.html | 625 ++-- examples/server_side/post.html | 617 ++-- examples/server_side/row_details.html | 623 ++-- examples/server_side/scripts/ssp.class.php | 17 +- examples/server_side/select_rows.html | 615 ++-- examples/server_side/simple.html | 616 ++-- examples/styling/bootstrap.html | 1081 ++----- examples/styling/bootstrap4.html | 1082 ++----- examples/styling/cell-border.html | 1063 ++---- examples/styling/compact.html | 1064 ++---- examples/styling/display.html | 1086 ++----- examples/styling/foundation.html | 1082 ++----- examples/styling/hover.html | 1064 ++---- examples/styling/index.html | 149 +- examples/styling/jqueryUI.html | 1084 ++----- examples/styling/material.html | 1079 ++----- examples/styling/no-classes.html | 1063 ++---- examples/styling/order-column.html | 1064 ++---- examples/styling/row-border.html | 1063 ++---- examples/styling/semanticui.html | 1082 ++----- examples/styling/stripe.html | 1063 ++---- examples/styling/uikit.html | 1076 ++---- media/css/dataTables.bootstrap.css | 5 +- media/css/dataTables.bootstrap.min.css | 2 +- media/css/dataTables.bootstrap4.css | 5 +- media/css/dataTables.bootstrap4.min.css | 2 +- media/css/dataTables.foundation.css | 1 + media/css/dataTables.foundation.min.css | 2 +- media/css/dataTables.jqueryui.css | 1 + media/css/dataTables.jqueryui.min.css | 2 +- media/css/dataTables.semanticui.css | 34 +- media/css/dataTables.semanticui.min.css | 2 +- media/css/dataTables.uikit.css | 1 + media/css/dataTables.uikit.min.css | 2 +- media/css/jquery.dataTables.css | 1 + media/css/jquery.dataTables.min.css | 2 +- media/js/dataTables.foundation.js | 2 +- media/js/dataTables.foundation.min.js | 2 +- media/js/jquery.dataTables.js | 2873 ++++++++--------- media/js/jquery.dataTables.min.js | 326 +- package.json | 3 +- 121 files changed, 19859 insertions(+), 71876 deletions(-) diff --git a/.datatables-commit-sync b/.datatables-commit-sync index 194f9486..a8730758 100644 --- a/.datatables-commit-sync +++ b/.datatables-commit-sync @@ -1 +1 @@ -70237790a1832fe8352a2bbda66d85afa5f1deb0 +e468e3e4ce459e647bb9b2fbf20e6d9fc148e198 diff --git a/examples/advanced_init/column_render.html b/examples/advanced_init/column_render.html index 5757a2fe..5e1c27fd 100644 --- a/examples/advanced_init/column_render.html +++ b/examples/advanced_init/column_render.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Column rendering - - - - - - - - - + - - -
-
-

DataTables example Column rendering

-
-

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

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Column rendering

+
+

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

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "columnDefs": [ { @@ -560,366 +76,153 @@ $(document).ready(function() { ] } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/complex_header.html b/examples/advanced_init/complex_header.html index 97fb8298..c354b408 100644 --- a/examples/advanced_init/complex_header.html +++ b/examples/advanced_init/complex_header.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Complex headers with column visibility - - - - - - - - - + - - -
-
-

DataTables example Complex headers with column visibility

-
-

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.visible option and column().visible() 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.

-

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

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameHR InformationContact
PositionSalaryOfficeExtn.E-mail
NamePositionSalaryOfficeExtn.E-mail
Tiger NixonSystem Architect$320,800Edinburgh5421t.nixon@datatables.net
Garrett WintersAccountant$170,750Tokyo8422g.winters@datatables.net
Ashton CoxJunior Technical Author$86,000San Francisco1562a.cox@datatables.net
Cedric KellySenior Javascript Developer$433,060Edinburgh6224c.kelly@datatables.net
Airi SatouAccountant$162,700Tokyo5407a.satou@datatables.net
Brielle WilliamsonIntegration Specialist$372,000New York4804b.williamson@datatables.net
Herrod ChandlerSales Assistant$137,500San Francisco9608h.chandler@datatables.net
Rhona DavidsonIntegration Specialist$327,900Tokyo6200r.davidson@datatables.net
Colleen HurstJavascript Developer$205,500San Francisco2360c.hurst@datatables.net
Sonya FrostSoftware Engineer$103,600Edinburgh1667s.frost@datatables.net
Jena GainesOffice Manager$90,560London3814j.gaines@datatables.net
Quinn FlynnSupport Lead$342,000Edinburgh9497q.flynn@datatables.net
Charde MarshallRegional Director$470,600San Francisco6741c.marshall@datatables.net
Haley KennedySenior Marketing Designer$313,500London3597h.kennedy@datatables.net
Tatyana FitzpatrickRegional Director$385,750London1965t.fitzpatrick@datatables.net
Michael SilvaMarketing Designer$198,500London1581m.silva@datatables.net
Paul ByrdChief Financial Officer (CFO)$725,000New York3059p.byrd@datatables.net
Gloria LittleSystems Administrator$237,500New York1721g.little@datatables.net
Bradley GreerSoftware Engineer$132,000London2558b.greer@datatables.net
Dai RiosPersonnel Lead$217,500Edinburgh2290d.rios@datatables.net
Jenette CaldwellDevelopment Lead$345,000New York1937j.caldwell@datatables.net
Yuri BerryChief Marketing Officer (CMO)$675,000New York6154y.berry@datatables.net
Caesar VancePre-Sales Support$106,450New York8330c.vance@datatables.net
Doris WilderSales Assistant$85,600Sidney3023d.wilder@datatables.net
Angelica RamosChief Executive Officer (CEO)$1,200,000London5797a.ramos@datatables.net
Gavin JoyceDeveloper$92,575Edinburgh8822g.joyce@datatables.net
Jennifer ChangRegional Director$357,650Singapore9239j.chang@datatables.net
Brenden WagnerSoftware Engineer$206,850San Francisco1314b.wagner@datatables.net
Fiona GreenChief Operating Officer (COO)$850,000San Francisco2947f.green@datatables.net
Shou ItouRegional Marketing$163,000Tokyo8899s.itou@datatables.net
Michelle HouseIntegration Specialist$95,400Sidney2769m.house@datatables.net
Suki BurksDeveloper$114,500London6832s.burks@datatables.net
Prescott BartlettTechnical Author$145,000London3606p.bartlett@datatables.net
Gavin CortezTeam Leader$235,500San Francisco2860g.cortez@datatables.net
Martena MccrayPost-Sales support$324,050Edinburgh8240m.mccray@datatables.net
Unity ButlerMarketing Designer$85,675San Francisco5384u.butler@datatables.net
Howard HatfieldOffice Manager$164,500San Francisco7031h.hatfield@datatables.net
Hope FuentesSecretary$109,850San Francisco6318h.fuentes@datatables.net
Vivian HarrellFinancial Controller$452,500San Francisco9422v.harrell@datatables.net
Timothy MooneyOffice Manager$136,200London7580t.mooney@datatables.net
Jackson BradshawDirector$645,750New York1042j.bradshaw@datatables.net
Olivia LiangSupport Engineer$234,500Singapore2120o.liang@datatables.net
Bruno NashSoftware Engineer$163,500London6222b.nash@datatables.net
Sakura YamamotoSupport Engineer$139,575Tokyo9383s.yamamoto@datatables.net
Thor WaltonDeveloper$98,540New York8327t.walton@datatables.net
Finn CamachoSupport Engineer$87,500San Francisco2927f.camacho@datatables.net
Serge BaldwinData Coordinator$138,575Singapore8352s.baldwin@datatables.net
Zenaida FrankSoftware Engineer$125,250New York7439z.frank@datatables.net
Zorita SerranoSoftware Engineer$115,000San Francisco4389z.serrano@datatables.net
Jennifer AcostaJunior Javascript Developer$75,650Edinburgh3431j.acosta@datatables.net
Cara StevensSales Assistant$145,600New York3990c.stevens@datatables.net
Hermione ButlerRegional Director$356,250London1016h.butler@datatables.net
Lael GreerSystems Administrator$103,500London6733l.greer@datatables.net
Jonas AlexanderDeveloper$86,500San Francisco8196j.alexander@datatables.net
Shad DeckerRegional Director$183,000Edinburgh6373s.decker@datatables.net
Michael BruceJavascript Developer$183,000Singapore5384m.bruce@datatables.net
Donna SniderCustomer Support$112,000New York4226d.snider@datatables.net
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Complex headers with column visibility

+
+

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.visible option and column().visible() 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.

+ +

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

+ +
+ + +
NameHR InformationContact
PositionSalaryOfficeExtn.E-mail
NamePositionSalaryOfficeExtn.E-mail
Tiger NixonSystem Architect$320,800Edinburgh5421t.nixon@datatables.net
Garrett WintersAccountant$170,750Tokyo8422g.winters@datatables.net
Ashton CoxJunior Technical Author$86,000San Francisco1562a.cox@datatables.net
Cedric KellySenior Javascript Developer$433,060Edinburgh6224c.kelly@datatables.net
Airi SatouAccountant$162,700Tokyo5407a.satou@datatables.net
Brielle WilliamsonIntegration Specialist$372,000New York4804b.williamson@datatables.net
Herrod ChandlerSales Assistant$137,500San Francisco9608h.chandler@datatables.net
Rhona DavidsonIntegration Specialist$327,900Tokyo6200r.davidson@datatables.net
Colleen HurstJavascript Developer$205,500San Francisco2360c.hurst@datatables.net
Sonya FrostSoftware Engineer$103,600Edinburgh1667s.frost@datatables.net
Jena GainesOffice Manager$90,560London3814j.gaines@datatables.net
Quinn FlynnSupport Lead$342,000Edinburgh9497q.flynn@datatables.net
Charde MarshallRegional Director$470,600San Francisco6741c.marshall@datatables.net
Haley KennedySenior Marketing Designer$313,500London3597h.kennedy@datatables.net
Tatyana FitzpatrickRegional Director$385,750London1965t.fitzpatrick@datatables.net
Michael SilvaMarketing Designer$198,500London1581m.silva@datatables.net
Paul ByrdChief Financial Officer (CFO)$725,000New York3059p.byrd@datatables.net
Gloria LittleSystems Administrator$237,500New York1721g.little@datatables.net
Bradley GreerSoftware Engineer$132,000London2558b.greer@datatables.net
Dai RiosPersonnel Lead$217,500Edinburgh2290d.rios@datatables.net
Jenette CaldwellDevelopment Lead$345,000New York1937j.caldwell@datatables.net
Yuri BerryChief Marketing Officer (CMO)$675,000New York6154y.berry@datatables.net
Caesar VancePre-Sales Support$106,450New York8330c.vance@datatables.net
Doris WilderSales Assistant$85,600Sidney3023d.wilder@datatables.net
Angelica RamosChief Executive Officer (CEO)$1,200,000London5797a.ramos@datatables.net
Gavin JoyceDeveloper$92,575Edinburgh8822g.joyce@datatables.net
Jennifer ChangRegional Director$357,650Singapore9239j.chang@datatables.net
Brenden WagnerSoftware Engineer$206,850San Francisco1314b.wagner@datatables.net
Fiona GreenChief Operating Officer (COO)$850,000San Francisco2947f.green@datatables.net
Shou ItouRegional Marketing$163,000Tokyo8899s.itou@datatables.net
Michelle HouseIntegration Specialist$95,400Sidney2769m.house@datatables.net
Suki BurksDeveloper$114,500London6832s.burks@datatables.net
Prescott BartlettTechnical Author$145,000London3606p.bartlett@datatables.net
Gavin CortezTeam Leader$235,500San Francisco2860g.cortez@datatables.net
Martena MccrayPost-Sales support$324,050Edinburgh8240m.mccray@datatables.net
Unity ButlerMarketing Designer$85,675San Francisco5384u.butler@datatables.net
Howard HatfieldOffice Manager$164,500San Francisco7031h.hatfield@datatables.net
Hope FuentesSecretary$109,850San Francisco6318h.fuentes@datatables.net
Vivian HarrellFinancial Controller$452,500San Francisco9422v.harrell@datatables.net
Timothy MooneyOffice Manager$136,200London7580t.mooney@datatables.net
Jackson BradshawDirector$645,750New York1042j.bradshaw@datatables.net
Olivia LiangSupport Engineer$234,500Singapore2120o.liang@datatables.net
Bruno NashSoftware Engineer$163,500London6222b.nash@datatables.net
Sakura YamamotoSupport Engineer$139,575Tokyo9383s.yamamoto@datatables.net
Thor WaltonDeveloper$98,540New York8327t.walton@datatables.net
Finn CamachoSupport Engineer$87,500San Francisco2927f.camacho@datatables.net
Serge BaldwinData Coordinator$138,575Singapore8352s.baldwin@datatables.net
Zenaida FrankSoftware Engineer$125,250New York7439z.frank@datatables.net
Zorita SerranoSoftware Engineer$115,000San Francisco4389z.serrano@datatables.net
Jennifer AcostaJunior Javascript Developer$75,650Edinburgh3431j.acosta@datatables.net
Cara StevensSales Assistant$145,600New York3990c.stevens@datatables.net
Hermione ButlerRegional Director$356,250London1016h.butler@datatables.net
Lael GreerSystems Administrator$103,500London6733l.greer@datatables.net
Jonas AlexanderDeveloper$86,500San Francisco8196j.alexander@datatables.net
Shad DeckerRegional Director$183,000Edinburgh6373s.decker@datatables.net
Michael BruceJavascript Developer$183,000Singapore5384m.bruce@datatables.net
Donna SniderCustomer Support$112,000New York4226d.snider@datatables.net
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "columnDefs": [ { "visible": false, @@ -551,366 +64,153 @@ $(document).ready(function() { } ] } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/defaults.html b/examples/advanced_init/defaults.html index 3ae453b2..e22b925f 100644 --- a/examples/advanced_init/defaults.html +++ b/examples/advanced_init/defaults.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Setting defaults - - - - - - - - - + - - -
-
-

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

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

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

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $.extend( true, $.fn.dataTable.defaults, { "searching": false, "ordering": false } ); @@ -544,366 +62,153 @@ $(document).ready(function() { $(document).ready(function() { $('#example').DataTable(); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/dom_multiple_elements.html b/examples/advanced_init/dom_multiple_elements.html index de03f2c5..34b8d8f5 100644 --- a/examples/advanced_init/dom_multiple_elements.html +++ b/examples/advanced_init/dom_multiple_elements.html @@ -1,15 +1,15 @@ - + - - - - - DataTables example - Multiple table control elements - - - - - - - - - + - - -
-
-

DataTables example Multiple table control elements

-
-

As is described by the basic DOM positioning example you can use the dom initialisation parameter to move DataTables features around the table to where you want them.

-

In addition to this, you can also use dom 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.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Multiple table control elements

+
+

As is described by the basic DOM positioning example you can use the dom initialisation parameter to move DataTables features around the table to where you want them.

+ +

In addition to this, you can also use dom 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.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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:

- -
-
-

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

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ div.dataTables_length { padding-left: 2em; } div.dataTables_length, div.dataTables_filter { padding-top: 0.55em; } +
+ +

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.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/dom_toolbar.html b/examples/advanced_init/dom_toolbar.html index 7a673efd..7c76f9fc 100644 --- a/examples/advanced_init/dom_toolbar.html +++ b/examples/advanced_init/dom_toolbar.html @@ -1,32 +1,25 @@ - + - - - - - DataTables example - Custom toolbar elements - - - - - - - - - + - - -
-
-

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 '-string toolbar' is created using dom, and jQuery then used to insert HTML into that - element to create the toolbar. You could put whatever HTML you want into the toolbar!

-

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 dom 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).

-

There are a number of extensions for DataTables that make use of this ability. For example, Buttons is a feature plug-in for DataTables that adds buttons into a toolbar for a table (copy to clipboard, save to - Excel / PDF, and more).

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(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 '-string toolbar' is created using dom, and jQuery then used to insert HTML into that element to create the toolbar. You could put whatever HTML you want into the toolbar!

+ +

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 dom 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).

+ +

There are a number of extensions for DataTables that make use of this ability. For example, Buttons is a feature plug-in for DataTables that adds buttons into a toolbar for a table (copy to clipboard, save to Excel / PDF, and more).

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "dom": '<"toolbar">frtip' } ); $("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:

- -
-
-

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

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ .toolbar { float: left; } +
+ +

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.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/dt_events.html b/examples/advanced_init/dt_events.html index ed6d6f90..907a4cb6 100644 --- a/examples/advanced_init/dt_events.html +++ b/examples/advanced_init/dt_events.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - DataTables events - - - - - - - - - + - - -
-
-

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.

-

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() 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 order, search and page events by adding a notification that the event fired to an - element on the page to show that they have indeed fired.

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(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.

+ +

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() 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 order, search and page events by adding a notification that the event fired to an element on the page to show that they have indeed fired.

+ +
+ +
+
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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>'; @@ -557,366 +72,153 @@ $(document).ready(function() { .on( 'page.dt', function () { eventFired( 'Page' ); } ) .DataTable(); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/events_live.html b/examples/advanced_init/events_live.html index 58f195e1..6e5147e5 100644 --- a/examples/advanced_init/events_live.html +++ b/examples/advanced_init/events_live.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - DOM / jQuery events - - - - - - - - - + - - -
-
-

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.

-

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. This example - also uses the DataTables row().data() method to - retrieve information about the selected row - the row's data so we can show it in the alert message in this case.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(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.

+ +

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. This example also uses the DataTables row().data() method to retrieve information about the selected row - the row's data so we can show it in the alert message in this case.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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 () { @@ -543,366 +60,153 @@ $(document).ready(function() { alert( 'You clicked on '+data[0]+'\'s row' ); } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/footer_callback.html b/examples/advanced_init/footer_callback.html index fbbf31c8..76665afa 100644 --- a/examples/advanced_init/footer_callback.html +++ b/examples/advanced_init/footer_callback.html @@ -1,28 +1,21 @@ - + - - - - - DataTables example - Footer callback - - - - - - - - - + - - -
-
-

DataTables example Footer callback

-
-

Through the use of the header and footer callback manipulation functions provided by DataTables (headerCallback and footerCallback), 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() API method and column().footer() for writing the value into the - footer.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOfficeSalary
Total:
TigerNixonSystem ArchitectEdinburgh$320,800
GarrettWintersAccountantTokyo$170,750
AshtonCoxJunior Technical AuthorSan Francisco$86,000
CedricKellySenior Javascript DeveloperEdinburgh$433,060
AiriSatouAccountantTokyo$162,700
BrielleWilliamsonIntegration SpecialistNew York$372,000
HerrodChandlerSales AssistantSan Francisco$137,500
RhonaDavidsonIntegration SpecialistTokyo$327,900
ColleenHurstJavascript DeveloperSan Francisco$205,500
SonyaFrostSoftware EngineerEdinburgh$103,600
JenaGainesOffice ManagerLondon$90,560
QuinnFlynnSupport LeadEdinburgh$342,000
ChardeMarshallRegional DirectorSan Francisco$470,600
HaleyKennedySenior Marketing DesignerLondon$313,500
TatyanaFitzpatrickRegional DirectorLondon$385,750
MichaelSilvaMarketing DesignerLondon$198,500
PaulByrdChief Financial Officer (CFO)New York$725,000
GloriaLittleSystems AdministratorNew York$237,500
BradleyGreerSoftware EngineerLondon$132,000
DaiRiosPersonnel LeadEdinburgh$217,500
JenetteCaldwellDevelopment LeadNew York$345,000
YuriBerryChief Marketing Officer (CMO)New York$675,000
CaesarVancePre-Sales SupportNew York$106,450
DorisWilderSales AssistantSidney$85,600
AngelicaRamosChief Executive Officer (CEO)London$1,200,000
GavinJoyceDeveloperEdinburgh$92,575
JenniferChangRegional DirectorSingapore$357,650
BrendenWagnerSoftware EngineerSan Francisco$206,850
FionaGreenChief Operating Officer (COO)San Francisco$850,000
ShouItouRegional MarketingTokyo$163,000
MichelleHouseIntegration SpecialistSidney$95,400
SukiBurksDeveloperLondon$114,500
PrescottBartlettTechnical AuthorLondon$145,000
GavinCortezTeam LeaderSan Francisco$235,500
MartenaMccrayPost-Sales supportEdinburgh$324,050
UnityButlerMarketing DesignerSan Francisco$85,675
HowardHatfieldOffice ManagerSan Francisco$164,500
HopeFuentesSecretarySan Francisco$109,850
VivianHarrellFinancial ControllerSan Francisco$452,500
TimothyMooneyOffice ManagerLondon$136,200
JacksonBradshawDirectorNew York$645,750
OliviaLiangSupport EngineerSingapore$234,500
BrunoNashSoftware EngineerLondon$163,500
SakuraYamamotoSupport EngineerTokyo$139,575
ThorWaltonDeveloperNew York$98,540
FinnCamachoSupport EngineerSan Francisco$87,500
SergeBaldwinData CoordinatorSingapore$138,575
ZenaidaFrankSoftware EngineerNew York$125,250
ZoritaSerranoSoftware EngineerSan Francisco$115,000
JenniferAcostaJunior Javascript DeveloperEdinburgh$75,650
CaraStevensSales AssistantNew York$145,600
HermioneButlerRegional DirectorLondon$356,250
LaelGreerSystems AdministratorLondon$103,500
JonasAlexanderDeveloperSan Francisco$86,500
ShadDeckerRegional DirectorEdinburgh$183,000
MichaelBruceJavascript DeveloperSingapore$183,000
DonnaSniderCustomer SupportNew York$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Footer callback

+
+

Through the use of the header and footer callback manipulation functions provided by DataTables (headerCallback and footerCallback), 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() API method and column().footer() for writing the value into the footer.

+ +
+ + +
First nameLast namePositionOfficeSalary
Total:
TigerNixonSystem ArchitectEdinburgh$320,800
GarrettWintersAccountantTokyo$170,750
AshtonCoxJunior Technical AuthorSan Francisco$86,000
CedricKellySenior Javascript DeveloperEdinburgh$433,060
AiriSatouAccountantTokyo$162,700
BrielleWilliamsonIntegration SpecialistNew York$372,000
HerrodChandlerSales AssistantSan Francisco$137,500
RhonaDavidsonIntegration SpecialistTokyo$327,900
ColleenHurstJavascript DeveloperSan Francisco$205,500
SonyaFrostSoftware EngineerEdinburgh$103,600
JenaGainesOffice ManagerLondon$90,560
QuinnFlynnSupport LeadEdinburgh$342,000
ChardeMarshallRegional DirectorSan Francisco$470,600
HaleyKennedySenior Marketing DesignerLondon$313,500
TatyanaFitzpatrickRegional DirectorLondon$385,750
MichaelSilvaMarketing DesignerLondon$198,500
PaulByrdChief Financial Officer (CFO)New York$725,000
GloriaLittleSystems AdministratorNew York$237,500
BradleyGreerSoftware EngineerLondon$132,000
DaiRiosPersonnel LeadEdinburgh$217,500
JenetteCaldwellDevelopment LeadNew York$345,000
YuriBerryChief Marketing Officer (CMO)New York$675,000
CaesarVancePre-Sales SupportNew York$106,450
DorisWilderSales AssistantSidney$85,600
AngelicaRamosChief Executive Officer (CEO)London$1,200,000
GavinJoyceDeveloperEdinburgh$92,575
JenniferChangRegional DirectorSingapore$357,650
BrendenWagnerSoftware EngineerSan Francisco$206,850
FionaGreenChief Operating Officer (COO)San Francisco$850,000
ShouItouRegional MarketingTokyo$163,000
MichelleHouseIntegration SpecialistSidney$95,400
SukiBurksDeveloperLondon$114,500
PrescottBartlettTechnical AuthorLondon$145,000
GavinCortezTeam LeaderSan Francisco$235,500
MartenaMccrayPost-Sales supportEdinburgh$324,050
UnityButlerMarketing DesignerSan Francisco$85,675
HowardHatfieldOffice ManagerSan Francisco$164,500
HopeFuentesSecretarySan Francisco$109,850
VivianHarrellFinancial ControllerSan Francisco$452,500
TimothyMooneyOffice ManagerLondon$136,200
JacksonBradshawDirectorNew York$645,750
OliviaLiangSupport EngineerSingapore$234,500
BrunoNashSoftware EngineerLondon$163,500
SakuraYamamotoSupport EngineerTokyo$139,575
ThorWaltonDeveloperNew York$98,540
FinnCamachoSupport EngineerSan Francisco$87,500
SergeBaldwinData CoordinatorSingapore$138,575
ZenaidaFrankSoftware EngineerNew York$125,250
ZoritaSerranoSoftware EngineerSan Francisco$115,000
JenniferAcostaJunior Javascript DeveloperEdinburgh$75,650
CaraStevensSales AssistantNew York$145,600
HermioneButlerRegional DirectorLondon$356,250
LaelGreerSystems AdministratorLondon$103,500
JonasAlexanderDeveloperSan Francisco$86,500
ShadDeckerRegional DirectorEdinburgh$183,000
MichaelBruceJavascript DeveloperSingapore$183,000
DonnaSniderCustomer SupportNew York$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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; @@ -541,366 +118,153 @@ $(document).ready(function() { } } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

th { white-space: nowrap; } + +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ th { white-space: nowrap; } +
+ +

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.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/html5-data-attributes.html b/examples/advanced_init/html5-data-attributes.html index 52475dea..2495a2f8 100644 --- a/examples/advanced_init/html5-data-attributes.html +++ b/examples/advanced_init/html5-data-attributes.html @@ -1,906 +1,209 @@ - + - - - - - DataTables example - HTML5 data-* attributes - cell data - - - - - - - - - + - - -
-
-

DataTables example HTML5 data-* attributes - cell data

-
-

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:

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

    DataTables example HTML5 data-* attributes - cell data

    +
    +

    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:

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

    + +
    + + +
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    T. NixonSystem ArchitectEdinburgh61Mon 25th Apr 11$320,800/y
    G. WintersAccountantTokyo63Mon 25th Jul 11$170,750/y
    A. CoxJunior Technical AuthorSan Francisco66Mon 12th Jan 09$86,000/y
    C. KellySenior Javascript DeveloperEdinburgh22Thu 29th Mar 12$433,060/y
    A. SatouAccountantTokyo33Fri 28th Nov 08$162,700/y
    B. WilliamsonIntegration SpecialistNew York61Sun 2nd Dec 12$372,000/y
    H. ChandlerSales AssistantSan Francisco59Mon 6th Aug 12$137,500/y
    R. DavidsonIntegration SpecialistTokyo55Thu 14th Oct 10$327,900/y
    C. HurstJavascript DeveloperSan Francisco39Tue 15th Sep 09$205,500/y
    S. FrostSoftware EngineerEdinburgh23Sat 13th Dec 08$103,600/y
    J. GainesOffice ManagerLondon30Fri 19th Dec 08$90,560/y
    Q. FlynnSupport LeadEdinburgh22Sun 3rd Mar 13$342,000/y
    C. MarshallRegional DirectorSan Francisco36Thu 16th Oct 08$470,600/y
    H. KennedySenior Marketing DesignerLondon43Tue 18th Dec 12$313,500/y
    T. FitzpatrickRegional DirectorLondon19Wed 17th Mar 10$385,750/y
    M. SilvaMarketing DesignerLondon66Tue 27th Nov 12$198,500/y
    P. ByrdChief Financial Officer (CFO)New York64Wed 9th Jun 10$725,000/y
    G. LittleSystems AdministratorNew York59Fri 10th Apr 09$237,500/y
    B. GreerSoftware EngineerLondon41Sat 13th Oct 12$132,000/y
    D. RiosPersonnel LeadEdinburgh35Wed 26th Sep 12$217,500/y
    J. CaldwellDevelopment LeadNew York30Sat 3rd Sep 11$345,000/y
    Y. BerryChief Marketing Officer (CMO)New York40Thu 25th Jun 09$675,000/y
    C. VancePre-Sales SupportNew York21Mon 12th Dec 11$106,450/y
    D. WilderSales AssistantSidney23Mon 20th Sep 10$85,600/y
    A. RamosChief Executive Officer (CEO)London47Fri 9th Oct 09$1,200,000/y
    G. JoyceDeveloperEdinburgh42Wed 22nd Dec 10$92,575/y
    J. ChangRegional DirectorSingapore28Sun 14th Nov 10$357,650/y
    B. WagnerSoftware EngineerSan Francisco28Tue 7th Jun 11$206,850/y
    F. GreenChief Operating Officer (COO)San Francisco48Thu 11th Mar 10$850,000/y
    S. ItouRegional MarketingTokyo20Sun 14th Aug 11$163,000/y
    M. HouseIntegration SpecialistSidney37Thu 2nd Jun 11$95,400/y
    S. BurksDeveloperLondon53Thu 22nd Oct 09$114,500/y
    P. BartlettTechnical AuthorLondon27Sat 7th May 11$145,000/y
    G. CortezTeam LeaderSan Francisco22Sun 26th Oct 08$235,500/y
    M. MccrayPost-Sales supportEdinburgh46Wed 9th Mar 11$324,050/y
    U. ButlerMarketing DesignerSan Francisco47Wed 9th Dec 09$85,675/y
    H. HatfieldOffice ManagerSan Francisco51Tue 16th Dec 08$164,500/y
    H. FuentesSecretarySan Francisco41Fri 12th Feb 10$109,850/y
    V. HarrellFinancial ControllerSan Francisco62Sat 14th Feb 09$452,500/y
    T. MooneyOffice ManagerLondon37Thu 11th Dec 08$136,200/y
    J. BradshawDirectorNew York65Fri 26th Sep 08$645,750/y
    O. LiangSupport EngineerSingapore64Thu 3rd Feb 11$234,500/y
    B. NashSoftware EngineerLondon38Tue 3rd May 11$163,500/y
    S. YamamotoSupport EngineerTokyo37Wed 19th Aug 09$139,575/y
    T. WaltonDeveloperNew York61Sun 11th Aug 13$98,540/y
    F. CamachoSupport EngineerSan Francisco47Tue 7th Jul 09$87,500/y
    S. BaldwinData CoordinatorSingapore64Mon 9th Apr 12$138,575/y
    Z. FrankSoftware EngineerNew York63Mon 4th Jan 10$125,250/y
    Z. SerranoSoftware EngineerSan Francisco56Fri 1st Jun 12$115,000/y
    J. AcostaJunior Javascript DeveloperEdinburgh43Fri 1st Feb 13$75,650/y
    C. StevensSales AssistantNew York46Tue 6th Dec 11$145,600/y
    H. ButlerRegional DirectorLondon47Mon 21st Mar 11$356,250/y
    L. GreerSystems AdministratorLondon21Fri 27th Feb 09$103,500/y
    J. AlexanderDeveloperSan Francisco30Wed 14th Jul 10$86,500/y
    S. DeckerRegional DirectorEdinburgh51Thu 13th Nov 08$183,000/y
    M. BruceJavascript DeveloperSingapore29Mon 27th Jun 11$183,000/y
    D. SniderCustomer SupportNew York27Tue 25th Jan 11$112,000/y
    + +
      +
    • Javascript
      • +
    • HTML
      • +
    • CSS
      • +
    • Ajax
      • +
    • Server-side script
    -

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

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    T. NixonSystem ArchitectEdinburgh61Mon 25th Apr 11$320,800/y
    G. WintersAccountantTokyo63Mon 25th Jul 11$170,750/y
    A. CoxJunior Technical AuthorSan Francisco66Mon 12th Jan 09$86,000/y
    C. KellySenior Javascript DeveloperEdinburgh22Thu 29th Mar 12$433,060/y
    A. SatouAccountantTokyo33Fri 28th Nov 08$162,700/y
    B. WilliamsonIntegration SpecialistNew York61Sun 2nd Dec 12$372,000/y
    H. ChandlerSales AssistantSan Francisco59Mon 6th Aug 12$137,500/y
    R. DavidsonIntegration SpecialistTokyo55Thu 14th Oct 10$327,900/y
    C. HurstJavascript DeveloperSan Francisco39Tue 15th Sep 09$205,500/y
    S. FrostSoftware EngineerEdinburgh23Sat 13th Dec 08$103,600/y
    J. GainesOffice ManagerLondon30Fri 19th Dec 08$90,560/y
    Q. FlynnSupport LeadEdinburgh22Sun 3rd Mar 13$342,000/y
    C. MarshallRegional DirectorSan Francisco36Thu 16th Oct 08$470,600/y
    H. KennedySenior Marketing DesignerLondon43Tue 18th Dec 12$313,500/y
    T. FitzpatrickRegional DirectorLondon19Wed 17th Mar 10$385,750/y
    M. SilvaMarketing DesignerLondon66Tue 27th Nov 12$198,500/y
    P. ByrdChief Financial Officer (CFO)New York64Wed 9th Jun 10$725,000/y
    G. LittleSystems AdministratorNew York59Fri 10th Apr 09$237,500/y
    B. GreerSoftware EngineerLondon41Sat 13th Oct 12$132,000/y
    D. RiosPersonnel LeadEdinburgh35Wed 26th Sep 12$217,500/y
    J. CaldwellDevelopment LeadNew York30Sat 3rd Sep 11$345,000/y
    Y. BerryChief Marketing Officer (CMO)New York40Thu 25th Jun 09$675,000/y
    C. VancePre-Sales SupportNew York21Mon 12th Dec 11$106,450/y
    D. WilderSales AssistantSidney23Mon 20th Sep 10$85,600/y
    A. RamosChief Executive Officer (CEO)London47Fri 9th Oct 09$1,200,000/y
    G. JoyceDeveloperEdinburgh42Wed 22nd Dec 10$92,575/y
    J. ChangRegional DirectorSingapore28Sun 14th Nov 10$357,650/y
    B. WagnerSoftware EngineerSan Francisco28Tue 7th Jun 11$206,850/y
    F. GreenChief Operating Officer (COO)San Francisco48Thu 11th Mar 10$850,000/y
    S. ItouRegional MarketingTokyo20Sun 14th Aug 11$163,000/y
    M. HouseIntegration SpecialistSidney37Thu 2nd Jun 11$95,400/y
    S. BurksDeveloperLondon53Thu 22nd Oct 09$114,500/y
    P. BartlettTechnical AuthorLondon27Sat 7th May 11$145,000/y
    G. CortezTeam LeaderSan Francisco22Sun 26th Oct 08$235,500/y
    M. MccrayPost-Sales supportEdinburgh46Wed 9th Mar 11$324,050/y
    U. ButlerMarketing DesignerSan Francisco47Wed 9th Dec 09$85,675/y
    H. HatfieldOffice ManagerSan Francisco51Tue 16th Dec 08$164,500/y
    H. FuentesSecretarySan Francisco41Fri 12th Feb 10$109,850/y
    V. HarrellFinancial ControllerSan Francisco62Sat 14th Feb 09$452,500/y
    T. MooneyOffice ManagerLondon37Thu 11th Dec 08$136,200/y
    J. BradshawDirectorNew York65Fri 26th Sep 08$645,750/y
    O. LiangSupport EngineerSingapore64Thu 3rd Feb 11$234,500/y
    B. NashSoftware EngineerLondon38Tue 3rd May 11$163,500/y
    S. YamamotoSupport EngineerTokyo37Wed 19th Aug 09$139,575/y
    T. WaltonDeveloperNew York61Sun 11th Aug 13$98,540/y
    F. CamachoSupport EngineerSan Francisco47Tue 7th Jul 09$87,500/y
    S. BaldwinData CoordinatorSingapore64Mon 9th Apr 12$138,575/y
    Z. FrankSoftware EngineerNew York63Mon 4th Jan 10$125,250/y
    Z. SerranoSoftware EngineerSan Francisco56Fri 1st Jun 12$115,000/y
    J. AcostaJunior Javascript DeveloperEdinburgh43Fri 1st Feb 13$75,650/y
    C. StevensSales AssistantNew York46Tue 6th Dec 11$145,600/y
    H. ButlerRegional DirectorLondon47Mon 21st Mar 11$356,250/y
    L. GreerSystems AdministratorLondon21Fri 27th Feb 09$103,500/y
    J. AlexanderDeveloperSan Francisco30Wed 14th Jul 10$86,500/y
    S. DeckerRegional DirectorEdinburgh51Thu 13th Nov 08$183,000/y
    M. BruceJavascript DeveloperSingapore29Mon 27th Jun 11$183,000/y
    D. SniderCustomer SupportNew York27Tue 25th Jan 11$112,000/y
    -
      -
    • Javascript
      • -
    • HTML
      • -
    • CSS
      • -
    • Ajax
      • -
    • Server-side script
      • -
    -
    -
    -

    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:

    - -
    -
    -

    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:

    + +

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

    + +
    +
    +

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

    +
    +
    +
    +

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

    + +
    + +

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

    + +
    +
    +

    This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

    +
    +
    +

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

    -
    -
    -

    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.

    +
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/html5-data-options.html b/examples/advanced_init/html5-data-options.html index 8ff122c2..346b2bc8 100644 --- a/examples/advanced_init/html5-data-options.html +++ b/examples/advanced_init/html5-data-options.html @@ -1,905 +1,687 @@ - + - - - - - DataTables example - HTML5 data-* attributes - table options - - - - - - - - - + - - -
-
-

DataTables example HTML5 data-* attributes - table options

-
-

As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* - attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the - data-* attributes taking priority).

-

Please note that the attribute values must contain valid JSON data or a Javascript primitive (as require by jQuery's $().data() method - this means that double quotes should be used inside the attribute if needed - for a string (see the data-order example below).

-

Additionally, jQuery will convert a dashed string into the camel-case notation used by DataTables for its options. For example data-page-length is - used to represent pageLength.

-

The table below shows the use of pageLength and order on the main table. Column options can also be defined on the table column cells, as shown by the use of the - columns.orderable option on - the fifth column below.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example HTML5 data-* attributes - table options

+
+

As of DataTables 1.10.5 it is now possible to define initialisation options using HTML5 data-* attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the data-* attributes taking priority).

+ +

Please note that the attribute values must contain valid JSON data or a Javascript primitive (as require by jQuery's $().data() method - this means that double quotes should be used inside the attribute if needed for a string (see the data-order example below).

+ +

Additionally, jQuery will convert a dashed string into the camel-case notation used by DataTables for its options. For example data-page-length is used to represent pageLength.

+ +

The table below shows the use of pageLength and order on the main table. Column options can also be defined on the table column cells, as shown by the use of the columns.orderable option on the fifth column below.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

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

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/index.html b/examples/advanced_init/index.html index e2af5916..5f065148 100644 --- a/examples/advanced_init/index.html +++ b/examples/advanced_init/index.html @@ -1,100 +1,65 @@ - + - - - - - - - - - - DataTables examples - Advanced initialisation - - -
+ + + + + + + + DataTables examples - Advanced initialisation + + +
+
+

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.

+ +

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!

+ +
+
+
+
-

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.

-

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!

-
-
-
-
-
-
-
-
-
-

Advanced initialisation

- +
+
+
+
+

Advanced initialisation

+
+ +
+

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

+ +

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

-
-

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

-

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

-
-
-
- +
+ \ No newline at end of file diff --git a/examples/advanced_init/language_file.html b/examples/advanced_init/language_file.html index a9d73987..22ef14ce 100644 --- a/examples/advanced_init/language_file.html +++ b/examples/advanced_init/language_file.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Language file - - - - - - - - - + - - -
-
-

DataTables example Language file

-
-

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

-

The following example shows DataTables reading a German language file which is hosted on the DataTables CDN

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Language file

+
+

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

+ +

The following example shows DataTables reading a German language file which is hosted on the DataTables CDN

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "language": { "url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/German.json" } } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/length_menu.html b/examples/advanced_init/length_menu.html index 72a08e7d..f5ad18e7 100644 --- a/examples/advanced_init/length_menu.html +++ b/examples/advanced_init/length_menu.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Page length options - - - - - - - - - + - - -
-
-

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 lengthMenu 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').
    • + + + +
    +
    +

    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 lengthMenu 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').
      • +
    + +

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

    + +
    + + +
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
    Garrett WintersAccountantTokyo632011/07/25$170,750
    Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
    Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
    Airi SatouAccountantTokyo332008/11/28$162,700
    Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
    Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
    Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
    Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
    Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
    Jena GainesOffice ManagerLondon302008/12/19$90,560
    Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
    Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
    Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
    Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
    Michael SilvaMarketing DesignerLondon662012/11/27$198,500
    Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
    Gloria LittleSystems AdministratorNew York592009/04/10$237,500
    Bradley GreerSoftware EngineerLondon412012/10/13$132,000
    Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
    Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
    Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
    Caesar VancePre-Sales SupportNew York212011/12/12$106,450
    Doris WilderSales AssistantSidney232010/09/20$85,600
    Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
    Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
    Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
    Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
    Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
    Shou ItouRegional MarketingTokyo202011/08/14$163,000
    Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
    Suki BurksDeveloperLondon532009/10/22$114,500
    Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
    Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
    Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
    Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
    Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
    Hope FuentesSecretarySan Francisco412010/02/12$109,850
    Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
    Timothy MooneyOffice ManagerLondon372008/12/11$136,200
    Jackson BradshawDirectorNew York652008/09/26$645,750
    Olivia LiangSupport EngineerSingapore642011/02/03$234,500
    Bruno NashSoftware EngineerLondon382011/05/03$163,500
    Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
    Thor WaltonDeveloperNew York612013/08/11$98,540
    Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
    Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
    Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
    Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
    Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
    Cara StevensSales AssistantNew York462011/12/06$145,600
    Hermione ButlerRegional DirectorLondon472011/03/21$356,250
    Lael GreerSystems AdministratorLondon212009/02/27$103,500
    Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
    Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
    Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
    Donna SniderCustomer SupportNew York272011/01/25$112,000
    + +
      +
    • Javascript
      • +
    • HTML
      • +
    • CSS
      • +
    • Ajax
      • +
    • Server-side script
    -

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

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
    Garrett WintersAccountantTokyo632011/07/25$170,750
    Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
    Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
    Airi SatouAccountantTokyo332008/11/28$162,700
    Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
    Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
    Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
    Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
    Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
    Jena GainesOffice ManagerLondon302008/12/19$90,560
    Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
    Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
    Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
    Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
    Michael SilvaMarketing DesignerLondon662012/11/27$198,500
    Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
    Gloria LittleSystems AdministratorNew York592009/04/10$237,500
    Bradley GreerSoftware EngineerLondon412012/10/13$132,000
    Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
    Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
    Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
    Caesar VancePre-Sales SupportNew York212011/12/12$106,450
    Doris WilderSales AssistantSidney232010/09/20$85,600
    Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
    Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
    Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
    Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
    Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
    Shou ItouRegional MarketingTokyo202011/08/14$163,000
    Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
    Suki BurksDeveloperLondon532009/10/22$114,500
    Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
    Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
    Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
    Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
    Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
    Hope FuentesSecretarySan Francisco412010/02/12$109,850
    Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
    Timothy MooneyOffice ManagerLondon372008/12/11$136,200
    Jackson BradshawDirectorNew York652008/09/26$645,750
    Olivia LiangSupport EngineerSingapore642011/02/03$234,500
    Bruno NashSoftware EngineerLondon382011/05/03$163,500
    Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
    Thor WaltonDeveloperNew York612013/08/11$98,540
    Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
    Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
    Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
    Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
    Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
    Cara StevensSales AssistantNew York462011/12/06$145,600
    Hermione ButlerRegional DirectorLondon472011/03/21$356,250
    Lael GreerSystems AdministratorLondon212009/02/27$103,500
    Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
    Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
    Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
    Donna SniderCustomer SupportNew York272011/01/25$112,000
    -
      -
    • Javascript
      • -
    • HTML
      • -
    • CSS
      • -
    • Ajax
      • -
    • Server-side script
      • -
    -
    -
    -

    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:

    - -
    -
    -

    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:

    + +

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

    + +
    +
    +

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

    +
    +
    +
    +

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

    + +
    + +

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

    + +
    +
    +

    This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

    +
    +
    +

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

    -
    -
    -

    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.

    +
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/object_dom_read.html b/examples/advanced_init/object_dom_read.html index 9e127f35..8cadb01f 100644 --- a/examples/advanced_init/object_dom_read.html +++ b/examples/advanced_init/object_dom_read.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Read HTML to data objects - - - - - - - - - + - - -
-
-

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.

-

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.data initialisation option to - define how you want the data to be stored. Typically columns.data 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.

-

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

- 
-{
-	"name": "...",
-	"position": "...",
-	"office": "...",
-	"age": "...",
-	"start_date": "...",
-	"salary": "..."
+		
+	
+	
+		

+			

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

+
+
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.data initialisation option to define how you want the data to be stored. Typically columns.data 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.

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

+
+
{
+    "name": "...",
+    "position": "...",
+    "office": "...",
+    "age": "...",
+    "start_date": "...",
+    "salary": "..."
 }
-
-

-				
Please note that this feature requires DataTables 1.10.3 or newer.

-			

-			
-				
-					
-						
-						
-						
-						
-						
-						
-					
-				
-				
-					
-						
-						
-						
-						
-						
-						
-					
-				
-				
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-					
-						
-						
-						
-						
-						
-						
-					
-				
-			
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000

-			
    
-				
  • Javascript
    • 
-				
  • HTML
    • 
-				
  • CSS
    • 
-				
  • Ajax
    • 
-				
  • Server-side script
    • 
-			

-			

-				

-					
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
+
+ +

Please note that this feature requires DataTables 1.10.3 or newer.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable({ "columns": [ { "data": "name" }, @@ -566,366 +84,153 @@ $(document).ready(function() { ] }); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/row_callback.html b/examples/advanced_init/row_callback.html index f09bcb9e..3b89be21 100644 --- a/examples/advanced_init/row_callback.html +++ b/examples/advanced_init/row_callback.html @@ -1,31 +1,24 @@ - + - - - - - DataTables example - Row created callback - - - - - - - - - + - - -
-
-

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 - createdRow 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 $150,000. - Note that columns.createdCell could also be used to create exactly the same effect.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(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 createdRow 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.createdCell could also be used to create exactly the same effect.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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 > 150000 ) { @@ -550,369 +67,156 @@ $(document).ready(function() { } } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

td.highlight { + +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

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

+ +
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/row_grouping.html b/examples/advanced_init/row_grouping.html index 4f7524d5..02eb67d8 100644 --- a/examples/advanced_init/row_grouping.html +++ b/examples/advanced_init/row_grouping.html @@ -1,31 +1,24 @@ - + - - - - - DataTables example - Row grouping - - - - - - - - - + - - -
-
-

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.

-

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 drawCallback - function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A click event handler is - added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(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.

+ +

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 drawCallback function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A click event handler is added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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 } @@ -602,369 +119,156 @@ $(document).ready(function() { } } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

tr.group, + +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

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

+ +
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/advanced_init/sort_direction_control.html b/examples/advanced_init/sort_direction_control.html index d8726ca3..dc3148ec 100644 --- a/examples/advanced_init/sort_direction_control.html +++ b/examples/advanced_init/sort_direction_control.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Order direction sequence control - - - - - - - - - + - - -
-
-

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.orderSequence initialisation parameter. This parameter also allows you to limit the ordering to a single - direction, or you could add complex behaviour to the ordering interaction.

-

The example below shows:

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

    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.orderSequence initialisation parameter. This parameter also allows you to limit the ordering to a single direction, or you could add complex behaviour to the ordering interaction.

    + +

    The example below shows:

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

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

    + +
    + + +
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
    Garrett WintersAccountantTokyo632011/07/25$170,750
    Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
    Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
    Airi SatouAccountantTokyo332008/11/28$162,700
    Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
    Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
    Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
    Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
    Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
    Jena GainesOffice ManagerLondon302008/12/19$90,560
    Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
    Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
    Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
    Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
    Michael SilvaMarketing DesignerLondon662012/11/27$198,500
    Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
    Gloria LittleSystems AdministratorNew York592009/04/10$237,500
    Bradley GreerSoftware EngineerLondon412012/10/13$132,000
    Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
    Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
    Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
    Caesar VancePre-Sales SupportNew York212011/12/12$106,450
    Doris WilderSales AssistantSidney232010/09/20$85,600
    Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
    Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
    Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
    Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
    Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
    Shou ItouRegional MarketingTokyo202011/08/14$163,000
    Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
    Suki BurksDeveloperLondon532009/10/22$114,500
    Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
    Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
    Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
    Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
    Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
    Hope FuentesSecretarySan Francisco412010/02/12$109,850
    Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
    Timothy MooneyOffice ManagerLondon372008/12/11$136,200
    Jackson BradshawDirectorNew York652008/09/26$645,750
    Olivia LiangSupport EngineerSingapore642011/02/03$234,500
    Bruno NashSoftware EngineerLondon382011/05/03$163,500
    Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
    Thor WaltonDeveloperNew York612013/08/11$98,540
    Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
    Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
    Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
    Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
    Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
    Cara StevensSales AssistantNew York462011/12/06$145,600
    Hermione ButlerRegional DirectorLondon472011/03/21$356,250
    Lael GreerSystems AdministratorLondon212009/02/27$103,500
    Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
    Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
    Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
    Donna SniderCustomer SupportNew York272011/01/25$112,000
    + +
      +
    • Javascript
      • +
    • HTML
      • +
    • CSS
      • +
    • Ajax
      • +
    • Server-side script
    -

    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.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
    Garrett WintersAccountantTokyo632011/07/25$170,750
    Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
    Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
    Airi SatouAccountantTokyo332008/11/28$162,700
    Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
    Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
    Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
    Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
    Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
    Jena GainesOffice ManagerLondon302008/12/19$90,560
    Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
    Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
    Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
    Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
    Michael SilvaMarketing DesignerLondon662012/11/27$198,500
    Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
    Gloria LittleSystems AdministratorNew York592009/04/10$237,500
    Bradley GreerSoftware EngineerLondon412012/10/13$132,000
    Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
    Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
    Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
    Caesar VancePre-Sales SupportNew York212011/12/12$106,450
    Doris WilderSales AssistantSidney232010/09/20$85,600
    Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
    Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
    Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
    Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
    Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
    Shou ItouRegional MarketingTokyo202011/08/14$163,000
    Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
    Suki BurksDeveloperLondon532009/10/22$114,500
    Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
    Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
    Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
    Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
    Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
    Hope FuentesSecretarySan Francisco412010/02/12$109,850
    Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
    Timothy MooneyOffice ManagerLondon372008/12/11$136,200
    Jackson BradshawDirectorNew York652008/09/26$645,750
    Olivia LiangSupport EngineerSingapore642011/02/03$234,500
    Bruno NashSoftware EngineerLondon382011/05/03$163,500
    Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
    Thor WaltonDeveloperNew York612013/08/11$98,540
    Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
    Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
    Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
    Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
    Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
    Cara StevensSales AssistantNew York462011/12/06$145,600
    Hermione ButlerRegional DirectorLondon472011/03/21$356,250
    Lael GreerSystems AdministratorLondon212009/02/27$103,500
    Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
    Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
    Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
    Donna SniderCustomer SupportNew York272011/01/25$112,000
    -
      -
    • Javascript
      • -
    • HTML
      • -
    • CSS
      • -
    • Ajax
      • -
    • Server-side script
      • -
    -
    -
    -

    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, @@ -560,366 +79,153 @@ $(document).ready(function() { ] } ); } ); -

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

    - -
    -
    -

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

    -
    -
    -
    -

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

    + +

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

    + +
    +
    +

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

    +
    +
    +
    +

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

    + +
    + +

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

    + +
    +
    +

    This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

    +
    +
    +

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

    -
    -
    -

    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.

    +
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/ajax/custom_data_flat.html b/examples/ajax/custom_data_flat.html index 8b0c313b..7aa46a53 100644 --- a/examples/ajax/custom_data_flat.html +++ b/examples/ajax/custom_data_flat.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Flat array data source - - - - - - - - - + - - -
-
-

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 ajax initiation option.

-

The ajax.dataSrc 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.
    • + + + +
    +
    +

    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 ajax initiation option.

    + +

    The ajax.dataSrc 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.
      • +
    + +

    The example below shows ajax.dataSrc 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.

    + +
    + + +
    NamePositionOfficeExtn.Start dateSalary
    NamePositionOfficeExtn.Start dateSalary
    + +
      +
    • Javascript
      • +
    • HTML
      • +
    • CSS
      • +
    • Ajax
      • +
    • Server-side script
    -

    The example below shows ajax.dataSrc 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.

    -
    - - - - - - - - - - - - - - - - - - - - - -
    NamePositionOfficeExtn.Start dateSalary
    NamePositionOfficeExtn.Start dateSalary
    -
      -
    • Javascript
      • -
    • HTML
      • -
    • CSS
      • -
    • Ajax
      • -
    • Server-side script
      • -
    -
    -
    -

    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", @@ -107,366 +82,153 @@ $(document).ready(function() { ] } ); } ); -

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

    - -
    -
    -

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

    -
    -
    -
    -

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

    + +

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

    + +
    +
    +

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

    +
    +
    +
    +

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

    + +
    + +

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

    + +
    +
    +

    This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

    +
    +
    +

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

    -
    -
    -

    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.

    +
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/ajax/custom_data_property.html b/examples/ajax/custom_data_property.html index b80a0850..88c2dcb7 100644 --- a/examples/ajax/custom_data_property.html +++ b/examples/ajax/custom_data_property.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Custom data source property - - - - - - - - - + - - -
-
-

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 ajax initiation option.

-

The ajax.dataSrc 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.
    • + + + +
    +
    +

    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 ajax initiation option.

    + +

    The ajax.dataSrc 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.
      • +
    + +

    The example below shows ajax.dataSrc 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.

    + +

    For more details on loading a DataTable with Ajax data, please refer to the Ajax section of the manual.

    + +
    + + +
    NamePositionOfficeExtn.Start dateSalary
    NamePositionOfficeExtn.Start dateSalary
    + +
      +
    • Javascript
      • +
    • HTML
      • +
    • CSS
      • +
    • Ajax
      • +
    • Server-side script
    -

    The example below shows ajax.dataSrc 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.

    -

    For more details on loading a DataTable with Ajax data, please refer to the Ajax section of the manual.

    -
    - - - - - - - - - - - - - - - - - - - - - -
    NamePositionOfficeExtn.Start dateSalary
    NamePositionOfficeExtn.Start dateSalary
    -
      -
    • Javascript
      • -
    • HTML
      • -
    • CSS
      • -
    • Ajax
      • -
    • Server-side script
      • -
    -
    -
    -

    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", @@ -92,366 +68,153 @@ $(document).ready(function() { } } ); } ); -

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

    - -
    -
    -

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

    -
    -
    -
    -

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

    + +

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

    + +
    +
    +

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

    +
    +
    +
    +

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

    + +
    + +

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

    + +
    +
    +

    This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

    +
    +
    +

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

    -
    -
    -

    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.

    +
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/ajax/data/orthogonal.txt b/examples/ajax/data/orthogonal.txt index 11b408c6..16b5a640 100644 --- a/examples/ajax/data/orthogonal.txt +++ b/examples/ajax/data/orthogonal.txt @@ -6,7 +6,7 @@ "salary": "$320,800", "start_date": { "display": "Mon 25th Apr 11", - "timestamp": "1303686000" + "timestamp": "1303689600" }, "office": "Edinburgh", "extn": "5421" @@ -17,7 +17,7 @@ "salary": "$170,750", "start_date": { "display": "Mon 25th Jul 11", - "timestamp": "1311548400" + "timestamp": "1311552000" }, "office": "Tokyo", "extn": "8422" @@ -39,7 +39,7 @@ "salary": "$433,060", "start_date": { "display": "Thu 29th Mar 12", - "timestamp": "1332975600" + "timestamp": "1332979200" }, "office": "Edinburgh", "extn": "6224" @@ -72,7 +72,7 @@ "salary": "$137,500", "start_date": { "display": "Mon 6th Aug 12", - "timestamp": "1344207600" + "timestamp": "1344211200" }, "office": "San Francisco", "extn": "9608" @@ -83,7 +83,7 @@ "salary": "$327,900", "start_date": { "display": "Thu 14th Oct 10", - "timestamp": "1287010800" + "timestamp": "1287014400" }, "office": "Tokyo", "extn": "6200" @@ -94,7 +94,7 @@ "salary": "$205,500", "start_date": { "display": "Tue 15th Sep 09", - "timestamp": "1252969200" + "timestamp": "1252972800" }, "office": "San Francisco", "extn": "2360" @@ -138,7 +138,7 @@ "salary": "$470,600", "start_date": { "display": "Thu 16th Oct 08", - "timestamp": "1224111600" + "timestamp": "1224115200" }, "office": "San Francisco", "extn": "6741" @@ -182,7 +182,7 @@ "salary": "$725,000", "start_date": { "display": "Wed 9th Jun 10", - "timestamp": "1276038000" + "timestamp": "1276041600" }, "office": "New York", "extn": "3059" @@ -193,7 +193,7 @@ "salary": "$237,500", "start_date": { "display": "Fri 10th Apr 09", - "timestamp": "1239318000" + "timestamp": "1239321600" }, "office": "New York", "extn": "1721" @@ -204,7 +204,7 @@ "salary": "$132,000", "start_date": { "display": "Sat 13th Oct 12", - "timestamp": "1350082800" + "timestamp": "1350086400" }, "office": "London", "extn": "2558" @@ -215,7 +215,7 @@ "salary": "$217,500", "start_date": { "display": "Wed 26th Sep 12", - "timestamp": "1348614000" + "timestamp": "1348617600" }, "office": "Edinburgh", "extn": "2290" @@ -226,7 +226,7 @@ "salary": "$345,000", "start_date": { "display": "Sat 3rd Sep 11", - "timestamp": "1315004400" + "timestamp": "1315008000" }, "office": "New York", "extn": "1937" @@ -237,7 +237,7 @@ "salary": "$675,000", "start_date": { "display": "Thu 25th Jun 09", - "timestamp": "1245884400" + "timestamp": "1245888000" }, "office": "New York", "extn": "6154" @@ -259,7 +259,7 @@ "salary": "$85,600", "start_date": { "display": "Mon 20th Sep 10", - "timestamp": "1284937200" + "timestamp": "1284940800" }, "office": "Sidney", "extn": "3023" @@ -270,7 +270,7 @@ "salary": "$1,200,000", "start_date": { "display": "Fri 9th Oct 09", - "timestamp": "1255042800" + "timestamp": "1255046400" }, "office": "London", "extn": "5797" @@ -303,7 +303,7 @@ "salary": "$206,850", "start_date": { "display": "Tue 7th Jun 11", - "timestamp": "1307401200" + "timestamp": "1307404800" }, "office": "San Francisco", "extn": "1314" @@ -325,7 +325,7 @@ "salary": "$163,000", "start_date": { "display": "Sun 14th Aug 11", - "timestamp": "1313276400" + "timestamp": "1313280000" }, "office": "Tokyo", "extn": "8899" @@ -336,7 +336,7 @@ "salary": "$95,400", "start_date": { "display": "Thu 2nd Jun 11", - "timestamp": "1306969200" + "timestamp": "1306972800" }, "office": "Sidney", "extn": "2769" @@ -347,7 +347,7 @@ "salary": "$114,500", "start_date": { "display": "Thu 22nd Oct 09", - "timestamp": "1256166000" + "timestamp": "1256169600" }, "office": "London", "extn": "6832" @@ -358,7 +358,7 @@ "salary": "$145,000", "start_date": { "display": "Sat 7th May 11", - "timestamp": "1304722800" + "timestamp": "1304726400" }, "office": "London", "extn": "3606" @@ -369,7 +369,7 @@ "salary": "$235,500", "start_date": { "display": "Sun 26th Oct 08", - "timestamp": "1224975600" + "timestamp": "1224979200" }, "office": "San Francisco", "extn": "2860" @@ -446,7 +446,7 @@ "salary": "$645,750", "start_date": { "display": "Fri 26th Sep 08", - "timestamp": "1222383600" + "timestamp": "1222387200" }, "office": "New York", "extn": "1042" @@ -468,7 +468,7 @@ "salary": "$163,500", "start_date": { "display": "Tue 3rd May 11", - "timestamp": "1304377200" + "timestamp": "1304380800" }, "office": "London", "extn": "6222" @@ -479,7 +479,7 @@ "salary": "$139,575", "start_date": { "display": "Wed 19th Aug 09", - "timestamp": "1250636400" + "timestamp": "1250640000" }, "office": "Tokyo", "extn": "9383" @@ -490,7 +490,7 @@ "salary": "$98,540", "start_date": { "display": "Sun 11th Aug 13", - "timestamp": "1376175600" + "timestamp": "1376179200" }, "office": "New York", "extn": "8327" @@ -501,7 +501,7 @@ "salary": "$87,500", "start_date": { "display": "Tue 7th Jul 09", - "timestamp": "1246921200" + "timestamp": "1246924800" }, "office": "San Francisco", "extn": "2927" @@ -512,7 +512,7 @@ "salary": "$138,575", "start_date": { "display": "Mon 9th Apr 12", - "timestamp": "1333926000" + "timestamp": "1333929600" }, "office": "Singapore", "extn": "8352" @@ -534,7 +534,7 @@ "salary": "$115,000", "start_date": { "display": "Fri 1st Jun 12", - "timestamp": "1338505200" + "timestamp": "1338508800" }, "office": "San Francisco", "extn": "4389" @@ -589,7 +589,7 @@ "salary": "$86,500", "start_date": { "display": "Wed 14th Jul 10", - "timestamp": "1279062000" + "timestamp": "1279065600" }, "office": "San Francisco", "extn": "8196" @@ -611,7 +611,7 @@ "salary": "$183,000", "start_date": { "display": "Mon 27th Jun 11", - "timestamp": "1309129200" + "timestamp": "1309132800" }, "office": "Singapore", "extn": "5384" diff --git a/examples/ajax/deep.html b/examples/ajax/deep.html index 1fd8a2e2..42ec9fa9 100644 --- a/examples/ajax/deep.html +++ b/examples/ajax/deep.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Nested object data (objects) - - - - - - - - - + - - -
-
-

DataTables example Nested object data (objects)

-
-

DataTables has the ability to use data from almost any JSON data source through the use of the columns.data 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.data 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.

-

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",
-	"hr": {
-		"position": "System Architect",
-		"salary": "$3,120",
-		"start_date": "2011/04/25"
-	},
-	"contact": [
-		"Edinburgh",
-		"5421"
-	]
+		
+	
+	
+		

+			

+				
DataTables example Nested object data (objects)

+				

+					
DataTables has the ability to use data from almost any JSON data source through the use of the columns.data 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.data 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.

+
+
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",
+    "hr": {
+        "position": "System Architect",
+        "salary": "$3,120",
+        "start_date": "2011/04/25"
+    },
+    "contact": [
+        "Edinburgh",
+        "5421"
+    ]
 }
-
-

-			

-			
-				
-					
-						
-						
-						
-						
-						
-						
-					
-				
-				
-					
-						
-						
-						
-						
-						
-						
-					
-				
-			
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary

-			
    
-				
  • Javascript
    • 
-				
  • HTML
    • 
-				
  • CSS
    • 
-				
  • Ajax
    • 
-				
  • Server-side script
    • 
-			

-			

-				

-					
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
+
+ +
+ + +
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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", @@ -113,366 +86,153 @@ $(document).ready(function() { ] } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/ajax/defer_render.html b/examples/ajax/defer_render.html index ffa1dc99..71a50216 100644 --- a/examples/ajax/defer_render.html +++ b/examples/ajax/defer_render.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Deferred rendering for speed - - - - - - - - - + - - -
-
-

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

-

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.

-
- - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(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 deferRender 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.

+ +

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.

+ +
+ + +
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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:

- -
-
-

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:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/ajax/index.html b/examples/ajax/index.html index d9b8ae2e..1a07e15c 100644 --- a/examples/ajax/index.html +++ b/examples/ajax/index.html @@ -1,78 +1,58 @@ - + - - - - - - - - - - DataTables examples - Ajax sourced data - - -
+ + + + + + + + DataTables examples - Ajax sourced data + + +
+
+

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

+ +
+
+
+
-

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

-
-
-
-
-
-
-
-
-
-

Ajax

- +
+
+
+
+

Ajax

+
+ +
+

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

+ +

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

-
-

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

-

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

-
-
-
- +
+ \ No newline at end of file diff --git a/examples/ajax/null_data_source.html b/examples/ajax/null_data_source.html index 5bab6c14..880f4197 100644 --- a/examples/ajax/null_data_source.html +++ b/examples/ajax/null_data_source.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Generated content for a column - - - - - - - - - + - - -
-
-

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:

-
    -
  • - columns.render for - content that is dynamic (i.e. based upon the row's data) -
    • -
  • - columns.defaultContent for static content (i.e. simple strings) -
    • + + + +
    +
    +

    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:

    + + + +

    This examples shows the use of columns.defaultContent 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() 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.data option for the column has been set to null to indicate that the column has no information that should be obtained data source object.

    + +
    + + +
    NamePositionOfficeExtn.Start dateSalary
    NamePositionOfficeExtn.Start dateSalary
    + +
      +
    • Javascript
      • +
    • HTML
      • +
    • CSS
      • +
    • Ajax
      • +
    • Server-side script
    -

    This examples shows the use of columns.defaultContent 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() 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.data option for the column has been set to null to indicate that the column has no information - that should be obtained data source object.

    -
    - - - - - - - - - - - - - - - - - - - - - -
    NamePositionOfficeExtn.Start dateSalary
    NamePositionOfficeExtn.Start dateSalary
    -
      -
    • Javascript
      • -
    • HTML
      • -
    • CSS
      • -
    • Ajax
      • -
    • Server-side script
      • -
    -
    -
    -

    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": [ { @@ -110,366 +79,153 @@ $(document).ready(function() { alert( data[0] +"'s salary is: "+ data[ 5 ] ); } ); } ); -

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

    - -
    -
    -

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

    -
    -
    -
    -

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

    + +

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

    + +
    +
    +

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

    +
    +
    +
    +

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

    + +
    + +

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

    + +
    +
    +

    This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

    +
    +
    +

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

    -
    -
    -

    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.

    +
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/ajax/objects.html b/examples/ajax/objects.html index f351b781..430d2239 100644 --- a/examples/ajax/objects.html +++ b/examples/ajax/objects.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Ajax data source (objects) - - - - - - - - - + - - -
-
-

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.

-

This can be done quite simply by using the columns.data 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:

- 
-{
-	"name":	   "Tiger Nixon",
-	"position":   "System Architect",
-	"salary":	 "$3,120",
-	"start_date": "2011/04/25",
-	"office":	 "Edinburgh",
-	"extn":	   "5421"
+		
+	
+	
+		

+			

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

+
+
This can be done quite simply by using the columns.data 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:

+
+
{
+    "name":       "Tiger Nixon",
+    "position":   "System Architect",
+    "salary":     "$3,120",
+    "start_date": "2011/04/25",
+    "office":     "Edinburgh",
+    "extn":       "5421"
 }
-
-

-				
For more details on loading a DataTable with Ajax data, please refer to the Ajax section of the manual.

-			

-			
-				
-					
-						
-						
-						
-						
-						
-						
-					
-				
-				
-					
-						
-						
-						
-						
-						
-						
-					
-				
-			
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary

-			
    
-				
  • Javascript
    • 
-				
  • HTML
    • 
-				
  • CSS
    • 
-				
  • Ajax
    • 
-				
  • Server-side script
    • 
-			

-			

-				

-					
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
+
+ +

For more details on loading a DataTable with Ajax data, please refer to the Ajax section of the manual.

+ +
+ + +
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "ajax": "data/objects.txt", "columns": [ @@ -107,366 +82,153 @@ $(document).ready(function() { ] } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/ajax/objects_subarrays.html b/examples/ajax/objects_subarrays.html index 05979368..a14c00ee 100644 --- a/examples/ajax/objects_subarrays.html +++ b/examples/ajax/objects_subarrays.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Nested object data (arrays) - - - - - - - - - + - - -
-
-

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.data option, which is - particularly useful for working with JSON feeds in an already defined format.

-

The columns.data 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.data can process the data to combine and display the data in simple forms (more complex forms can be defined - by using columns.data as a - function).

-

This example shows two different aspects of using columns.data 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:
    • -
- 
-{
-	"name": [
-		"Nixon",
-		"Tiger"
-	],
-	"hr": [
-		"System Architect",
-		"$3,120",
-		"2011/04/25"
-	],
-	"office": "Edinburgh",
-	"extn": "5421"
+		
+	
+	
+		

+			

+				
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.data option, which is particularly useful for working with JSON feeds in an already defined format.

+
+
The columns.data 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.data can process the data to combine and display the data in simple forms (more complex forms can be defined by using columns.data as a function).

+
+
This example shows two different aspects of using columns.data 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:
    • 
+

+
+
{
+    "name": [
+        "Nixon",
+        "Tiger"
+    ],
+    "hr": [
+        "System Architect",
+        "$3,120",
+        "2011/04/25"
+    ],
+    "office": "Edinburgh",
+    "extn": "5421"
 }
-
-

-			

-			
-				
-					
-						
-						
-						
-						
-						
-						
-					
-				
-				
-					
-						
-						
-						
-						
-						
-						
-					
-				
-			
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary

-			
    
-				
  • Javascript
    • 
-				
  • HTML
    • 
-				
  • CSS
    • 
-				
  • Ajax
    • 
-				
  • Server-side script
    • 
-			

-			

-				

-					
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
+
+ +
+ + +
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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": [ @@ -121,366 +90,153 @@ $(document).ready(function() { ] } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/ajax/orthogonal-data.html b/examples/ajax/orthogonal-data.html index 74988d84..e4746131 100644 --- a/examples/ajax/orthogonal-data.html +++ b/examples/ajax/orthogonal-data.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Orthogonal data - - - - - - - - - + - - -
-
-

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.

-

This can be done quite simply by using the columns.data 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:

- 
-{
-	"name":	   "Tiger Nixon",
-	"position":   "System Architect",
-	"salary":	 "$3,120",
-	"start_date": {
-		"display": "Mon 25th Apr 11",
-		"timestamp": "1303682400"
-	},
-	"office":	 "Edinburgh",
-	"extn":	   "5421"
+		
+	
+	
+		

+			

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

+
+
This can be done quite simply by using the columns.data 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:

+
+
{
+    "name":       "Tiger Nixon",
+    "position":   "System Architect",
+    "salary":     "$3,120",
+    "start_date": {
+        "display": "Mon 25th Apr 11",
+        "timestamp": "1303682400"
+    },
+    "office":     "Edinburgh",
+    "extn":       "5421"
 }
-
-

-			

-			
-				
-					
-						
-						
-						
-						
-						
-						
-					
-				
-				
-					
-						
-						
-						
-						
-						
-						
-					
-				
-			
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary

-			
    
-				
  • Javascript
    • 
-				
  • HTML
    • 
-				
  • CSS
    • 
-				
  • Ajax
    • 
-				
  • Server-side script
    • 
-			

-			

-				

-					
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
+
+ +
+ + +
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { ajax: "data/orthogonal.txt", columns: [ @@ -115,366 +89,153 @@ $(document).ready(function() { ] } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/ajax/simple.html b/examples/ajax/simple.html index c055cf25..45aecfce 100644 --- a/examples/ajax/simple.html +++ b/examples/ajax/simple.html @@ -1,459 +1,220 @@ - + - - - - - DataTables example - Ajax data source (arrays) - - - - - - - - - + - - -
-
-

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 ajax option to the address of the - JSON data source.

-

The ajax option also allows for more - advanced configuration such as altering how the Ajax request is made. See the ajax 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.data 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:

- 
-[
-	"Tiger Nixon",
-	"System Architect",
-	"Edinburgh",
-	"5421",
-	"2011/04/25",
-	"$3,120"
+		
+	
+	
+		

+			

+				
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 ajax option to the address of the JSON data source.

+
+
The ajax option also allows for more advanced configuration such as altering how the Ajax request is made. See the ajax 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.data 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:

+
+
[
+    "Tiger Nixon",
+    "System Architect",
+    "Edinburgh",
+    "5421",
+    "2011/04/25",
+    "$3,120"
 ]
-
-

-				
For more details on loading a DataTable with Ajax data, please refer to the Ajax section of the manual.

-			

-			
-				
-					
-						
-						
-						
-						
-						
-						
-					
-				
-				
-					
-						
-						
-						
-						
-						
-						
-					
-				
-			
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary

-			
    
-				
  • Javascript
    • 
-				
  • HTML
    • 
-				
  • CSS
    • 
-				
  • Ajax
    • 
-				
  • Server-side script
    • 
-			

-			

-				

-					
The Javascript shown below is used to initialise the table shown in this example:
$(document).ready(function() {
+
+ +

For more details on loading a DataTable with Ajax data, please refer to the Ajax section of the manual.

+ +
+ + +
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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:

- -
-
-

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:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/add_row.html b/examples/api/add_row.html index 00b36568..398dc543 100644 --- a/examples/api/add_row.html +++ b/examples/api/add_row.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Add rows - - - - - - - - - + - - -
-
-

DataTables example Add rows

-
-

New rows can be added to a DataTable very easily using the row.add() 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() - method (note the plural). Data can be likewise be updated with the row().data() and row().remove() methods.

-

Note that in order to see the new row in the table you must call the draw() 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.

-

The Editor extension adds full table editing controls, including creating, editing and deleting rows, to a - DataTable.

-
- - - - - - - - - - - - - - - - - - - -
Column 1Column 2Column 3Column 4Column 5
Column 1Column 2Column 3Column 4Column 5
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Add rows

+
+

New rows can be added to a DataTable very easily using the row.add() 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() method (note the plural). Data can be likewise be updated with the row().data() and row().remove() methods.

+ +

Note that in order to see the new row in the table you must call the draw() 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.

+ +

The Editor extension adds full table editing controls, including creating, editing and deleting rows, to a DataTable.

+ +
+ + +
Column 1Column 2Column 3Column 4Column 5
Column 1Column 2Column 3Column 4Column 5
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { var t = $('#example').DataTable(); var counter = 1; @@ -110,366 +86,153 @@ $(document).ready(function() { // Automatically add a first row of data $('#addRow').click(); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/api_in_init.html b/examples/api/api_in_init.html index d4b95183..6fc7c961 100644 --- a/examples/api/api_in_init.html +++ b/examples/api/api_in_init.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Using API in callbacks - - - - - - - - - + - - -
-
-

DataTables example Using API in callbacks

-
-

There are times when you may wish to call API functions inside the DataTables callback functions (for example initComplete, rowCallback 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 $() - 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!

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(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 initComplete, rowCallback 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 $() 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!

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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(); @@ -552,366 +66,153 @@ $(document).ready(function() { } } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/counter_columns.html b/examples/api/counter_columns.html index a63def87..31b2bd22 100644 --- a/examples/api/counter_columns.html +++ b/examples/api/counter_columns.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Index column - - - - - - - - - + - - -
-
-

DataTables example Index column

-
-

Highly-interactive tables often require a 'counter' column that contains the position in the table for each row. 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 order and search events emitted by the table. When these events are - detected the column().nodes() method is used - to get the TD/TH nodes for the target column and the each() helper function used to iterate over each, which have their contents updated as needed. - Note that the filter and order options are using in the column() method to get the nodes in the current order and with the currently applied filter.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeSalary
NamePositionOfficeAgeSalary
Tiger NixonSystem ArchitectEdinburgh61$320,800
Garrett WintersAccountantTokyo63$170,750
Ashton CoxJunior Technical AuthorSan Francisco66$86,000
Cedric KellySenior Javascript DeveloperEdinburgh22$433,060
Airi SatouAccountantTokyo33$162,700
Brielle WilliamsonIntegration SpecialistNew York61$372,000
Herrod ChandlerSales AssistantSan Francisco59$137,500
Rhona DavidsonIntegration SpecialistTokyo55$327,900
Colleen HurstJavascript DeveloperSan Francisco39$205,500
Sonya FrostSoftware EngineerEdinburgh23$103,600
Jena GainesOffice ManagerLondon30$90,560
Quinn FlynnSupport LeadEdinburgh22$342,000
Charde MarshallRegional DirectorSan Francisco36$470,600
Haley KennedySenior Marketing DesignerLondon43$313,500
Tatyana FitzpatrickRegional DirectorLondon19$385,750
Michael SilvaMarketing DesignerLondon66$198,500
Paul ByrdChief Financial Officer (CFO)New York64$725,000
Gloria LittleSystems AdministratorNew York59$237,500
Bradley GreerSoftware EngineerLondon41$132,000
Dai RiosPersonnel LeadEdinburgh35$217,500
Jenette CaldwellDevelopment LeadNew York30$345,000
Yuri BerryChief Marketing Officer (CMO)New York40$675,000
Caesar VancePre-Sales SupportNew York21$106,450
Doris WilderSales AssistantSidney23$85,600
Angelica RamosChief Executive Officer (CEO)London47$1,200,000
Gavin JoyceDeveloperEdinburgh42$92,575
Jennifer ChangRegional DirectorSingapore28$357,650
Brenden WagnerSoftware EngineerSan Francisco28$206,850
Fiona GreenChief Operating Officer (COO)San Francisco48$850,000
Shou ItouRegional MarketingTokyo20$163,000
Michelle HouseIntegration SpecialistSidney37$95,400
Suki BurksDeveloperLondon53$114,500
Prescott BartlettTechnical AuthorLondon27$145,000
Gavin CortezTeam LeaderSan Francisco22$235,500
Martena MccrayPost-Sales supportEdinburgh46$324,050
Unity ButlerMarketing DesignerSan Francisco47$85,675
Howard HatfieldOffice ManagerSan Francisco51$164,500
Hope FuentesSecretarySan Francisco41$109,850
Vivian HarrellFinancial ControllerSan Francisco62$452,500
Timothy MooneyOffice ManagerLondon37$136,200
Jackson BradshawDirectorNew York65$645,750
Olivia LiangSupport EngineerSingapore64$234,500
Bruno NashSoftware EngineerLondon38$163,500
Sakura YamamotoSupport EngineerTokyo37$139,575
Thor WaltonDeveloperNew York61$98,540
Finn CamachoSupport EngineerSan Francisco47$87,500
Serge BaldwinData CoordinatorSingapore64$138,575
Zenaida FrankSoftware EngineerNew York63$125,250
Zorita SerranoSoftware EngineerSan Francisco56$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh43$75,650
Cara StevensSales AssistantNew York46$145,600
Hermione ButlerRegional DirectorLondon47$356,250
Lael GreerSystems AdministratorLondon21$103,500
Jonas AlexanderDeveloperSan Francisco30$86,500
Shad DeckerRegional DirectorEdinburgh51$183,000
Michael BruceJavascript DeveloperSingapore29$183,000
Donna SniderCustomer SupportNew York27$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Index column

+
+

Highly-interactive tables often require a 'counter' column that contains the position in the table for each row. 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 order and search events emitted by the table. When these events are detected the column().nodes() method is used to get the TD/TH nodes for the target column and the each() helper function used to iterate over each, which have their contents updated as needed. Note that the filter and order options are using in the column() method to get the nodes in the current order and with the currently applied filter.

+ +
+ + +
NamePositionOfficeAgeSalary
NamePositionOfficeAgeSalary
Tiger NixonSystem ArchitectEdinburgh61$320,800
Garrett WintersAccountantTokyo63$170,750
Ashton CoxJunior Technical AuthorSan Francisco66$86,000
Cedric KellySenior Javascript DeveloperEdinburgh22$433,060
Airi SatouAccountantTokyo33$162,700
Brielle WilliamsonIntegration SpecialistNew York61$372,000
Herrod ChandlerSales AssistantSan Francisco59$137,500
Rhona DavidsonIntegration SpecialistTokyo55$327,900
Colleen HurstJavascript DeveloperSan Francisco39$205,500
Sonya FrostSoftware EngineerEdinburgh23$103,600
Jena GainesOffice ManagerLondon30$90,560
Quinn FlynnSupport LeadEdinburgh22$342,000
Charde MarshallRegional DirectorSan Francisco36$470,600
Haley KennedySenior Marketing DesignerLondon43$313,500
Tatyana FitzpatrickRegional DirectorLondon19$385,750
Michael SilvaMarketing DesignerLondon66$198,500
Paul ByrdChief Financial Officer (CFO)New York64$725,000
Gloria LittleSystems AdministratorNew York59$237,500
Bradley GreerSoftware EngineerLondon41$132,000
Dai RiosPersonnel LeadEdinburgh35$217,500
Jenette CaldwellDevelopment LeadNew York30$345,000
Yuri BerryChief Marketing Officer (CMO)New York40$675,000
Caesar VancePre-Sales SupportNew York21$106,450
Doris WilderSales AssistantSidney23$85,600
Angelica RamosChief Executive Officer (CEO)London47$1,200,000
Gavin JoyceDeveloperEdinburgh42$92,575
Jennifer ChangRegional DirectorSingapore28$357,650
Brenden WagnerSoftware EngineerSan Francisco28$206,850
Fiona GreenChief Operating Officer (COO)San Francisco48$850,000
Shou ItouRegional MarketingTokyo20$163,000
Michelle HouseIntegration SpecialistSidney37$95,400
Suki BurksDeveloperLondon53$114,500
Prescott BartlettTechnical AuthorLondon27$145,000
Gavin CortezTeam LeaderSan Francisco22$235,500
Martena MccrayPost-Sales supportEdinburgh46$324,050
Unity ButlerMarketing DesignerSan Francisco47$85,675
Howard HatfieldOffice ManagerSan Francisco51$164,500
Hope FuentesSecretarySan Francisco41$109,850
Vivian HarrellFinancial ControllerSan Francisco62$452,500
Timothy MooneyOffice ManagerLondon37$136,200
Jackson BradshawDirectorNew York65$645,750
Olivia LiangSupport EngineerSingapore64$234,500
Bruno NashSoftware EngineerLondon38$163,500
Sakura YamamotoSupport EngineerTokyo37$139,575
Thor WaltonDeveloperNew York61$98,540
Finn CamachoSupport EngineerSan Francisco47$87,500
Serge BaldwinData CoordinatorSingapore64$138,575
Zenaida FrankSoftware EngineerNew York63$125,250
Zorita SerranoSoftware EngineerSan Francisco56$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh43$75,650
Cara StevensSales AssistantNew York46$145,600
Hermione ButlerRegional DirectorLondon47$356,250
Lael GreerSystems AdministratorLondon21$103,500
Jonas AlexanderDeveloperSan Francisco30$86,500
Shad DeckerRegional DirectorEdinburgh51$183,000
Michael BruceJavascript DeveloperSingapore29$183,000
Donna SniderCustomer SupportNew York27$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { var t = $('#example').DataTable( { "columnDefs": [ { "searchable": false, @@ -562,366 +76,153 @@ $(document).ready(function() { } ); } ).draw(); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/form.html b/examples/api/form.html index 36629347..acd29b0a 100644 --- a/examples/api/form.html +++ b/examples/api/form.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Form inputs - - - - - - - - - + - - -
-
-

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.

-

The $() method can be used to get nodes from the - document regardless of paging, ordering etc. This example shows $() being used to get all input elements from the table. In the example a simple - alert() is used to show the information from the form, but an Ajax call to the server with the form data could easily be performed.

-

If you are interested in a complete CRUD editing suit for DataTables have a look at the Editor extension which provides - simple setup and complete integration with DataTables.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameAgePositionOffice
NameAgePositionOffice
Tiger Nixon
Garrett Winters
Ashton Cox
Cedric Kelly
Airi Satou
Brielle Williamson
Herrod Chandler
Rhona Davidson
Colleen Hurst
Sonya Frost
Jena Gaines
Quinn Flynn
Charde Marshall
Haley Kennedy
Tatyana Fitzpatrick
Michael Silva
Paul Byrd
Gloria Little
Bradley Greer
Dai Rios
Jenette Caldwell
Yuri Berry
Caesar Vance
Doris Wilder
Angelica Ramos
Gavin Joyce
Jennifer Chang
Brenden Wagner
Fiona Green
Shou Itou
Michelle House
Suki Burks
Prescott Bartlett
Gavin Cortez
Martena Mccray
Unity Butler
Howard Hatfield
Hope Fuentes
Vivian Harrell
Timothy Mooney
Jackson Bradshaw
Olivia Liang
Bruno Nash
Sakura Yamamoto
Thor Walton
Finn Camacho
Serge Baldwin
Zenaida Frank
Zorita Serrano
Jennifer Acosta
Cara Stevens
Hermione Butler
Lael Greer
Jonas Alexander
Shad Decker
Michael Bruce
Donna Snider
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(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.

+ +

The $() method can be used to get nodes from the document regardless of paging, ordering etc. This example shows $() being used to get all input elements from the table. In the example a simple alert() is used to show the information from the form, but an Ajax call to the server with the form data could easily be performed.

+ +

If you are interested in a complete CRUD editing suit for DataTables have a look at the Editor extension which provides simple setup and complete integration with DataTables.

+ +
+ + +
NameAgePositionOffice
NameAgePositionOffice
Tiger Nixon
Garrett Winters
Ashton Cox
Cedric Kelly
Airi Satou
Brielle Williamson
Herrod Chandler
Rhona Davidson
Colleen Hurst
Sonya Frost
Jena Gaines
Quinn Flynn
Charde Marshall
Haley Kennedy
Tatyana Fitzpatrick
Michael Silva
Paul Byrd
Gloria Little
Bradley Greer
Dai Rios
Jenette Caldwell
Yuri Berry
Caesar Vance
Doris Wilder
Angelica Ramos
Gavin Joyce
Jennifer Chang
Brenden Wagner
Fiona Green
Shou Itou
Michelle House
Suki Burks
Prescott Bartlett
Gavin Cortez
Martena Mccray
Unity Butler
Howard Hatfield
Hope Fuentes
Vivian Harrell
Timothy Mooney
Jackson Bradshaw
Olivia Liang
Bruno Nash
Sakura Yamamoto
Thor Walton
Finn Camacho
Serge Baldwin
Zenaida Frank
Zorita Serrano
Jennifer Acosta
Cara Stevens
Hermione Butler
Lael Greer
Jonas Alexander
Shad Decker
Michael Bruce
Donna Snider
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { var table = $('#example').DataTable(); $('button').click( function() { @@ -1348,366 +70,153 @@ $(document).ready(function() { return false; } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/highlight.html b/examples/api/highlight.html index 69341f47..6dd53320 100644 --- a/examples/api/highlight.html +++ b/examples/api/highlight.html @@ -1,32 +1,25 @@ - + - - - - - DataTables example - Highlighting rows and columns - - - - - - - - - + - - -
-
-

DataTables example Highlighting rows and columns

-
-

Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow - columns. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.

-

This example shows that in action on DataTable by making use of the cell().index() method to get the index of the column that is to be operated on, and then the cells().nodes() and column().nodes() methods to remove old classes and - apply the new highlighted class, respectively.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Highlighting rows and columns

+
+

Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow columns. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.

+ +

This example shows that in action on DataTable by making use of the cell().index() method to get the index of the column that is to be operated on, and then the cells().nodes() and column().nodes() methods to remove old classes and apply the new highlighted class, respectively.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { var table = $('#example').DataTable(); $('#example tbody') @@ -556,368 +72,155 @@ $(document).ready(function() { $( table.column( colIdx ).nodes() ).addClass( 'highlight' ); } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

td.highlight { + +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

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

+ +
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/index.html b/examples/api/index.html index 25be0e31..a7ed8bf7 100644 --- a/examples/api/index.html +++ b/examples/api/index.html @@ -1,88 +1,60 @@ - + - - - - - - - - - - DataTables examples - API - - -
+ + + + + + + + DataTables examples - API + + +
+
+

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.

+ +
+
+
+
-

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.

-
-
-
-
-
-
-
-
-
-

API

- +
+
+
+
+

API

+
+ +
+

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

+ +

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

-
-

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

-

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

-
-
-
- +
+ \ No newline at end of file diff --git a/examples/api/multi_filter.html b/examples/api/multi_filter.html index 830ba03c..f7c9659a 100644 --- a/examples/api/multi_filter.html +++ b/examples/api/multi_filter.html @@ -1,32 +1,25 @@ - + - - - - - DataTables example - Individual column searching (text inputs) - - - - - - - - - + - - -
-
-

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.

-

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

-

The column searches are cumulative, so you can apply multiple individual column searches, 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() 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() method takes into account any hidden columns when selecting the column to act upon.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(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.

+ +

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

+ +

The column searches are cumulative, so you can apply multiple individual column searches, 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() 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() method takes into account any hidden columns when selecting the column to act upon.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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 = $(this).text(); @@ -584,370 +100,157 @@ $(document).ready(function() { } ); } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

tfoot input { + +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

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

+ +
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/multi_filter_select.html b/examples/api/multi_filter_select.html index 3ba8aa52..d486b579 100644 --- a/examples/api/multi_filter_select.html +++ b/examples/api/multi_filter_select.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Individual column searching (select inputs) - - - - - - - - - + - - -
-
-

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.

-

After the table is initialised, the API is used to build the select inputs through the use of the column().data() method to get the data for each column - in turn. The helper methods unique() and sort() 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() method.

-

Note that the column().search() 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(), column().search() and $.fn.dataTable.util.escapeRegex() which are used for searching globally, by column and escaping regular expressions - respectively.

-

Note also that this example shows the use of initComplete 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, initComplete is useful to execute code - after the data has been loaded.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(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.

+ +

After the table is initialised, the API is used to build the select inputs through the use of the column().data() method to get the data for each column in turn. The helper methods unique() and sort() 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() method.

+ +

Note that the column().search() 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(), column().search() and $.fn.dataTable.util.escapeRegex() which are used for searching globally, by column and escaping regular expressions respectively.

+ +

Note also that this example shows the use of initComplete 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, initComplete is useful to execute code after the data has been loaded.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { initComplete: function () { this.api().columns().every( function () { @@ -589,366 +96,153 @@ $(document).ready(function() { } } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/regex.html b/examples/api/regex.html index b0b024f7..4bd92d94 100644 --- a/examples/api/regex.html +++ b/examples/api/regex.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Search API (regular expressions) - - - - - - - - - + - - -
-
-

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()) and for each individual column (column().search()).

-

Note also that you must call the draw() 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.

-

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

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
TargetSearch textTreat as regexUse smart search
Global search
Column - Name
Column - Position
Column - Office
Column - Age
Column - Start date
Column - Salary
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

function filterGlobal () { + + + +
+
+

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()) and for each individual column (column().search()).

+ +

Note also that you must call the draw() 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.

+ +

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

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TargetSearch textTreat as regexUse smart search
Global search
Column - Name
Column - Position
Column - Office
Column - Age
Column - Start date
Column - Salary
+
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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'), @@ -639,366 +155,153 @@ $(document).ready(function() { filterColumn( $(this).parents('tr').attr('data-column') ); } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/row_details.html b/examples/api/row_details.html index e0e9c33f..a53186b9 100644 --- a/examples/api/row_details.html +++ b/examples/api/row_details.html @@ -1,15 +1,15 @@ - + - - - - - DataTables example - Child rows (show extra / detailed information) - - - - - - - - - + - - -
-
-

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 example below makes use of the row().child - methods to firstly check if a row is already displayed, and if so hide it (row().child.hide()), otherwise show it (row().child.show()). 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.

-
- - - - - - - - - - - - - - - - - - - -
NamePositionOfficeSalary
NamePositionOfficeSalary
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

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 example below makes use of the row().child methods to firstly check if a row is already displayed, and if so hide it (row().child.hide()), otherwise show it (row().child.show()). 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.

+ +
+ + +
NamePositionOfficeSalary
NamePositionOfficeSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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;">'+ @@ -185,372 +160,159 @@ $(document).ready(function() { } } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

td.details-control { + +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ td.details-control { background: url('../resources/details_open.png') no-repeat center center; cursor: pointer; } tr.shown td.details-control { background: url('../resources/details_close.png') no-repeat center center; } +
+ +

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.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/select_row.html b/examples/api/select_row.html index 6a03d21a..3de0ace3 100644 --- a/examples/api/select_row.html +++ b/examples/api/select_row.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Row selection (multiple rows) - - - - - - - - - + - - -
-
-

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() 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 and easier to use row selection option, check out the Select extension - provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(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() 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 and easier to use row selection option, check out the Select extension provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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 () { @@ -549,366 +66,153 @@ $(document).ready(function() { alert( table.rows('.selected').data().length +' row(s) selected' ); } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/select_single_row.html b/examples/api/select_single_row.html index c63f7dea..bbb31176 100644 --- a/examples/api/select_single_row.html +++ b/examples/api/select_single_row.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Row selection and deletion (single row) - - - - - - - - - + - - -
-
-

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.

-

Also shown is the row().remove() method which - will delete a row from a table, and the draw() 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 and easier to use row selection option, check out the Select extension - provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(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.

+ +

Also shown is the row().remove() method which will delete a row from a table, and the draw() 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 and easier to use row selection option, check out the Select extension provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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 () { @@ -564,366 +80,153 @@ $(document).ready(function() { table.row('.selected').remove().draw( false ); } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/show_hide.html b/examples/api/show_hide.html index d5e6f169..81451348 100644 --- a/examples/api/show_hide.html +++ b/examples/api/show_hide.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Show / hide columns dynamically - - - - - - - - - + - - -
-
-

DataTables example Show / hide columns dynamically

-
-

This example shows how you can make use of the column().visible() 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() method to select multiple columns and then using the columns().visible() method to set their state.

-

If you are looking for a more complete column visibility interaction controls, check out the Buttons extension - for DataTables provides a comprehensive module for column visibility control.

-
-
- Toggle column: Name - Position - Office - Age - Start date - Salary -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Show / hide columns dynamically

+
+

This example shows how you can make use of the column().visible() 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() method to select multiple columns and then using the columns().visible() method to set their state.

+ +

If you are looking for a more complete column visibility interaction controls, check out the Buttons extension for DataTables provides a comprehensive module for column visibility control.

+ +
+ +
+ Toggle column: + Name - + Position - + Office - + Age - + Start date - + Salary +
+
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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 @@ -566,366 +86,153 @@ $(document).ready(function() { column.visible( ! column.visible() ); } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/api/tabs_and_scrolling.html b/examples/api/tabs_and_scrolling.html index dad7022f..c630e42e 100644 --- a/examples/api/tabs_and_scrolling.html +++ b/examples/api/tabs_and_scrolling.html @@ -1,31 +1,19 @@ - + - - - - - DataTables example - Scrolling and Bootstrap tabs - - - - - - - - - - - - + - - -
-
-

DataTables example Scrolling and Bootstrap tabs

-
-

This example shows how DataTables with scrolling can be used together with Bootstrap tabs (or indeed any - other method whereby the table is in a hidden, display:none, element when it is initialised).

-

The reason this requires special consideration is that when the DataTable is initialised in a hidden element the browser doesn't have any measurements with - which to give the DataTable, and this will result in the misalignment of columns when scrolling is enabled.

-

This misalignment can be corrected by the columns.adjust() method when the table is made visible (i.e. it has dimensions).

-

This example shows how the Bootstrap shown.bs.tab event can be used to trigger this method call. The visible tables on the page are selected using - the static $.fn.dataTable.tables() - method and running the columns.adjust() method - on them.

-
-
- -
-
- - - - - - - - - - - -
NamePositionOfficeExtn.Start dateSalary
-
-
- - - - - - - - - - - -
NamePositionOfficeExtn.Start dateSalary
-
+ + + +
+
+

DataTables example Scrolling and Bootstrap tabs

+
+

This example shows how DataTables with scrolling can be used together with Bootstrap tabs (or indeed any other method whereby the table is in a hidden, display:none, element when it is initialised).

+ +

The reason this requires special consideration is that when the DataTable is initialised in a hidden element the browser doesn't have any measurements with which to give the DataTable, and this will result in the misalignment of columns when scrolling is enabled.

+ +

This misalignment can be corrected by the columns.adjust() method when the table is made visible (i.e. it has dimensions).

+ +

This example shows how the Bootstrap shown.bs.tab event can be used to trigger this method call. The visible tables on the page are selected using the static $.fn.dataTable.tables() method and running the columns.adjust() method on them.

+
-
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$(document).ready(function() { + + +
+ + +
+
+ + + + + + + + + + + +
NamePositionOfficeExtn.Start dateSalary
+
+ +
+ + + + + + + + + + + +
NamePositionOfficeExtn.Start dateSalary
+
+
+
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) { $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust(); } ); @@ -126,375 +115,153 @@ $(document).ready(function() { // Apply a search to the second table for the demo $('#myTable2').DataTable().search( 'New York' ).draw(); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/alt_pagination.html b/examples/basic_init/alt_pagination.html index ca41fe52..ae0ec0e5 100644 --- a/examples/basic_init/alt_pagination.html +++ b/examples/basic_init/alt_pagination.html @@ -1,912 +1,218 @@ - + - - - - - DataTables example - Alternative pagination - - - - - - - - - + - - -
-
-

DataTables example Alternative pagination

-
-

The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are - cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the pagingType option.

-

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

-
    -
  • numbers - Page number buttons only
    • -
  • simple - 'Previous' and 'Next' buttons only
    • -
  • simple_numbers - 'Previous' and 'Next' buttons, plus page numbers
    • -
  • full - 'First', 'Previous', 'Next' and 'Last' buttons
    • -
  • full_numbers - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers
    • + + + +
    +
    +

    DataTables example Alternative pagination

    +
    +

    The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the pagingType option.

    + +

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

    + +
      +
    • numbers - Page number buttons only
      • +
    • simple - 'Previous' and 'Next' buttons only
      • +
    • simple_numbers - 'Previous' and 'Next' buttons, plus page numbers
      • +
    • full - 'First', 'Previous', 'Next' and 'Last' buttons
      • +
    • full_numbers - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers
      • +
    + +

    The language strings of 'First', 'Previous' etc can be optionally through the internationalisation options of DataTables; language.paginate.first, language.paginate.previous etc.

    + +

    Additional options for the buttons that are shown can be added through the use of pagination type plug-ins. Furthermore, how the buttons are actually shown can be altered through the use of plug-in pagination renderers.

    + +

    The example below shows the full_numbers type of pagination.

    + +
    + + +
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
    Garrett WintersAccountantTokyo632011/07/25$170,750
    Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
    Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
    Airi SatouAccountantTokyo332008/11/28$162,700
    Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
    Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
    Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
    Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
    Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
    Jena GainesOffice ManagerLondon302008/12/19$90,560
    Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
    Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
    Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
    Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
    Michael SilvaMarketing DesignerLondon662012/11/27$198,500
    Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
    Gloria LittleSystems AdministratorNew York592009/04/10$237,500
    Bradley GreerSoftware EngineerLondon412012/10/13$132,000
    Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
    Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
    Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
    Caesar VancePre-Sales SupportNew York212011/12/12$106,450
    Doris WilderSales AssistantSidney232010/09/20$85,600
    Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
    Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
    Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
    Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
    Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
    Shou ItouRegional MarketingTokyo202011/08/14$163,000
    Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
    Suki BurksDeveloperLondon532009/10/22$114,500
    Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
    Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
    Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
    Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
    Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
    Hope FuentesSecretarySan Francisco412010/02/12$109,850
    Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
    Timothy MooneyOffice ManagerLondon372008/12/11$136,200
    Jackson BradshawDirectorNew York652008/09/26$645,750
    Olivia LiangSupport EngineerSingapore642011/02/03$234,500
    Bruno NashSoftware EngineerLondon382011/05/03$163,500
    Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
    Thor WaltonDeveloperNew York612013/08/11$98,540
    Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
    Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
    Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
    Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
    Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
    Cara StevensSales AssistantNew York462011/12/06$145,600
    Hermione ButlerRegional DirectorLondon472011/03/21$356,250
    Lael GreerSystems AdministratorLondon212009/02/27$103,500
    Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
    Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
    Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
    Donna SniderCustomer SupportNew York272011/01/25$112,000
    + +
      +
    • Javascript
      • +
    • HTML
      • +
    • CSS
      • +
    • Ajax
      • +
    • Server-side script
    -

    The language strings of 'First', 'Previous' etc can be optionally through the internationalisation options of DataTables; language.paginate.first, - language.paginate.previous etc.

    -

    Additional options for the buttons that are shown can be added through the use of pagination type plug-ins. Furthermore, how the buttons are actually shown can - be altered through the use of plug-in pagination renderers.

    -

    The example below shows the full_numbers type of pagination.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
    Garrett WintersAccountantTokyo632011/07/25$170,750
    Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
    Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
    Airi SatouAccountantTokyo332008/11/28$162,700
    Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
    Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
    Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
    Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
    Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
    Jena GainesOffice ManagerLondon302008/12/19$90,560
    Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
    Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
    Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
    Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
    Michael SilvaMarketing DesignerLondon662012/11/27$198,500
    Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
    Gloria LittleSystems AdministratorNew York592009/04/10$237,500
    Bradley GreerSoftware EngineerLondon412012/10/13$132,000
    Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
    Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
    Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
    Caesar VancePre-Sales SupportNew York212011/12/12$106,450
    Doris WilderSales AssistantSidney232010/09/20$85,600
    Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
    Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
    Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
    Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
    Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
    Shou ItouRegional MarketingTokyo202011/08/14$163,000
    Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
    Suki BurksDeveloperLondon532009/10/22$114,500
    Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
    Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
    Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
    Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
    Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
    Hope FuentesSecretarySan Francisco412010/02/12$109,850
    Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
    Timothy MooneyOffice ManagerLondon372008/12/11$136,200
    Jackson BradshawDirectorNew York652008/09/26$645,750
    Olivia LiangSupport EngineerSingapore642011/02/03$234,500
    Bruno NashSoftware EngineerLondon382011/05/03$163,500
    Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
    Thor WaltonDeveloperNew York612013/08/11$98,540
    Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
    Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
    Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
    Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
    Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
    Cara StevensSales AssistantNew York462011/12/06$145,600
    Hermione ButlerRegional DirectorLondon472011/03/21$356,250
    Lael GreerSystems AdministratorLondon212009/02/27$103,500
    Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
    Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
    Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
    Donna SniderCustomer SupportNew York272011/01/25$112,000
    -
      -
    • Javascript
      • -
    • HTML
      • -
    • CSS
      • -
    • Ajax
      • -
    • Server-side script
      • -
    -
    -
    -

    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( { "pagingType": "full_numbers" } ); } ); -

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

    - -
    -
    -

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

    -
    -
    -
    -

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

    + +

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

    + +
    +
    +

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

    +
    +
    +
    +

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

    + +
    + +

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

    + +
    +
    +

    This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

    +
    +
    +

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

    -
    -
    -

    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.

    +
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/comma-decimal.html b/examples/basic_init/comma-decimal.html index 8c925824..7ac316e7 100644 --- a/examples/basic_init/comma-decimal.html +++ b/examples/basic_init/comma-decimal.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Language - Comma decimal place - - - - - - - - - + - - -
-
-

DataTables example Language - Comma decimal place

-
-

A dot (.) is used to mark the decimal place in Javascript, however, many parts of the world use - a comma (,) and other characters such as the Unicode decimal separator (⎖) or a dash (-) are often used to show the - decimal place in a displayed number.

-

When reading such numbers, Javascript won't automatically recognise them as numbers, however, DataTables' type detection and sorting methods can be instructed - through the language.decimal - option which character is used as the decimal place in your numbers. This will be used to correctly adjust DataTables' type detection and sorting algorithms to - sort numbers in your table.

-

Any character can be passed in using the language.decimal option, although the decimal place character used in a single table must be consistent (i.e. numbers - with a dot decimal place and comma decimal place cannot both appear in the same table). Different tables on the same page can use different decimal characters if - required.

-

The example below shows a comma being used as the decimal place in the currency numbers shown in the final column.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320.800,00
Garrett WintersAccountantTokyo632011/07/25$170.750,00
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86.000,00
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433.060,00
Airi SatouAccountantTokyo332008/11/28$162.700,00
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372.000,00
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137.500,00
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327.900,00
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205.500,00
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103.600,00
Jena GainesOffice ManagerLondon302008/12/19$90.560,00
Quinn FlynnSupport LeadEdinburgh222013/03/03$342.000,00
Charde MarshallRegional DirectorSan Francisco362008/10/16$470.600,00
Haley KennedySenior Marketing DesignerLondon432012/12/18$313.500,00
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385.750,00
Michael SilvaMarketing DesignerLondon662012/11/27$198.500,00
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725.000,00
Gloria LittleSystems AdministratorNew York592009/04/10$237.500,00
Bradley GreerSoftware EngineerLondon412012/10/13$132.000,00
Dai RiosPersonnel LeadEdinburgh352012/09/26$217.500,00
Jenette CaldwellDevelopment LeadNew York302011/09/03$345.000,00
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675.000,00
Caesar VancePre-Sales SupportNew York212011/12/12$106.450,00
Doris WilderSales AssistantSidney232010/09/20$85.600,00
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1.200.000,00
Gavin JoyceDeveloperEdinburgh422010/12/22$92.575,00
Jennifer ChangRegional DirectorSingapore282010/11/14$357.650,00
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206.850,00
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850.000,00
Shou ItouRegional MarketingTokyo202011/08/14$163.000,00
Michelle HouseIntegration SpecialistSidney372011/06/02$95.400,00
Suki BurksDeveloperLondon532009/10/22$114.500,00
Prescott BartlettTechnical AuthorLondon272011/05/07$145.000,00
Gavin CortezTeam LeaderSan Francisco222008/10/26$235.500,00
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324.050,00
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85.675,00
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164.500,00
Hope FuentesSecretarySan Francisco412010/02/12$109.850,00
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452.500,00
Timothy MooneyOffice ManagerLondon372008/12/11$136.200,00
Jackson BradshawDirectorNew York652008/09/26$645.750,00
Olivia LiangSupport EngineerSingapore642011/02/03$234.500,00
Bruno NashSoftware EngineerLondon382011/05/03$163.500,00
Sakura YamamotoSupport EngineerTokyo372009/08/19$139.575,00
Thor WaltonDeveloperNew York612013/08/11$98.540,00
Finn CamachoSupport EngineerSan Francisco472009/07/07$87.500,00
Serge BaldwinData CoordinatorSingapore642012/04/09$138.575,00
Zenaida FrankSoftware EngineerNew York632010/01/04$125.250,00
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115.000,00
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75.650,00
Cara StevensSales AssistantNew York462011/12/06$145.600,00
Hermione ButlerRegional DirectorLondon472011/03/21$356.250,00
Lael GreerSystems AdministratorLondon212009/02/27$103.500,00
Jonas AlexanderDeveloperSan Francisco302010/07/14$86.500,00
Shad DeckerRegional DirectorEdinburgh512008/11/13$183.000,00
Michael BruceJavascript DeveloperSingapore292011/06/27$183.000,00
Donna SniderCustomer SupportNew York272011/01/25$112.000,00
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Language - Comma decimal place

+
+

A dot (.) is used to mark the decimal place in Javascript, however, many parts of the world use a comma (,) and other characters such as the Unicode decimal separator (⎖) or a dash (-) are often used to show the decimal place in a displayed number.

+ +

When reading such numbers, Javascript won't automatically recognise them as numbers, however, DataTables' type detection and sorting methods can be instructed through the language.decimal option which character is used as the decimal place in your numbers. This will be used to correctly adjust DataTables' type detection and sorting algorithms to sort numbers in your table.

+ +

Any character can be passed in using the language.decimal option, although the decimal place character used in a single table must be consistent (i.e. numbers with a dot decimal place and comma decimal place cannot both appear in the same table). Different tables on the same page can use different decimal characters if required.

+ +

The example below shows a comma being used as the decimal place in the currency numbers shown in the final column.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320.800,00
Garrett WintersAccountantTokyo632011/07/25$170.750,00
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86.000,00
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433.060,00
Airi SatouAccountantTokyo332008/11/28$162.700,00
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372.000,00
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137.500,00
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327.900,00
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205.500,00
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103.600,00
Jena GainesOffice ManagerLondon302008/12/19$90.560,00
Quinn FlynnSupport LeadEdinburgh222013/03/03$342.000,00
Charde MarshallRegional DirectorSan Francisco362008/10/16$470.600,00
Haley KennedySenior Marketing DesignerLondon432012/12/18$313.500,00
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385.750,00
Michael SilvaMarketing DesignerLondon662012/11/27$198.500,00
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725.000,00
Gloria LittleSystems AdministratorNew York592009/04/10$237.500,00
Bradley GreerSoftware EngineerLondon412012/10/13$132.000,00
Dai RiosPersonnel LeadEdinburgh352012/09/26$217.500,00
Jenette CaldwellDevelopment LeadNew York302011/09/03$345.000,00
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675.000,00
Caesar VancePre-Sales SupportNew York212011/12/12$106.450,00
Doris WilderSales AssistantSidney232010/09/20$85.600,00
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1.200.000,00
Gavin JoyceDeveloperEdinburgh422010/12/22$92.575,00
Jennifer ChangRegional DirectorSingapore282010/11/14$357.650,00
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206.850,00
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850.000,00
Shou ItouRegional MarketingTokyo202011/08/14$163.000,00
Michelle HouseIntegration SpecialistSidney372011/06/02$95.400,00
Suki BurksDeveloperLondon532009/10/22$114.500,00
Prescott BartlettTechnical AuthorLondon272011/05/07$145.000,00
Gavin CortezTeam LeaderSan Francisco222008/10/26$235.500,00
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324.050,00
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85.675,00
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164.500,00
Hope FuentesSecretarySan Francisco412010/02/12$109.850,00
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452.500,00
Timothy MooneyOffice ManagerLondon372008/12/11$136.200,00
Jackson BradshawDirectorNew York652008/09/26$645.750,00
Olivia LiangSupport EngineerSingapore642011/02/03$234.500,00
Bruno NashSoftware EngineerLondon382011/05/03$163.500,00
Sakura YamamotoSupport EngineerTokyo372009/08/19$139.575,00
Thor WaltonDeveloperNew York612013/08/11$98.540,00
Finn CamachoSupport EngineerSan Francisco472009/07/07$87.500,00
Serge BaldwinData CoordinatorSingapore642012/04/09$138.575,00
Zenaida FrankSoftware EngineerNew York632010/01/04$125.250,00
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115.000,00
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75.650,00
Cara StevensSales AssistantNew York462011/12/06$145.600,00
Hermione ButlerRegional DirectorLondon472011/03/21$356.250,00
Lael GreerSystems AdministratorLondon212009/02/27$103.500,00
Jonas AlexanderDeveloperSan Francisco302010/07/14$86.500,00
Shad DeckerRegional DirectorEdinburgh512008/11/13$183.000,00
Michael BruceJavascript DeveloperSingapore292011/06/27$183.000,00
Donna SniderCustomer SupportNew York272011/01/25$112.000,00
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "language": { "decimal": ",", @@ -547,366 +62,153 @@ $(document).ready(function() { } } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/complex_header.html b/examples/basic_init/complex_header.html index be3a0448..a5103c76 100644 --- a/examples/basic_init/complex_header.html +++ b/examples/basic_init/complex_header.html @@ -1,900 +1,202 @@ - + - - - - - DataTables example - Complex headers (rowspan and colspan) - - - - - - - - - + - - -
-
-

DataTables example Complex headers (rowspan and colspan)

-
-

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

-

Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to - attach the order listener, if more than one cell for a column if found. The orderCellsTop option can be used to tell DataTables to use the top cell if you prefer.

-

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

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameHR InformationContact
PositionSalaryOfficeExtn.E-mail
NamePositionSalaryOfficeExtn.E-mail
Tiger NixonSystem Architect$320,800Edinburgh5421t.nixon@datatables.net
Garrett WintersAccountant$170,750Tokyo8422g.winters@datatables.net
Ashton CoxJunior Technical Author$86,000San Francisco1562a.cox@datatables.net
Cedric KellySenior Javascript Developer$433,060Edinburgh6224c.kelly@datatables.net
Airi SatouAccountant$162,700Tokyo5407a.satou@datatables.net
Brielle WilliamsonIntegration Specialist$372,000New York4804b.williamson@datatables.net
Herrod ChandlerSales Assistant$137,500San Francisco9608h.chandler@datatables.net
Rhona DavidsonIntegration Specialist$327,900Tokyo6200r.davidson@datatables.net
Colleen HurstJavascript Developer$205,500San Francisco2360c.hurst@datatables.net
Sonya FrostSoftware Engineer$103,600Edinburgh1667s.frost@datatables.net
Jena GainesOffice Manager$90,560London3814j.gaines@datatables.net
Quinn FlynnSupport Lead$342,000Edinburgh9497q.flynn@datatables.net
Charde MarshallRegional Director$470,600San Francisco6741c.marshall@datatables.net
Haley KennedySenior Marketing Designer$313,500London3597h.kennedy@datatables.net
Tatyana FitzpatrickRegional Director$385,750London1965t.fitzpatrick@datatables.net
Michael SilvaMarketing Designer$198,500London1581m.silva@datatables.net
Paul ByrdChief Financial Officer (CFO)$725,000New York3059p.byrd@datatables.net
Gloria LittleSystems Administrator$237,500New York1721g.little@datatables.net
Bradley GreerSoftware Engineer$132,000London2558b.greer@datatables.net
Dai RiosPersonnel Lead$217,500Edinburgh2290d.rios@datatables.net
Jenette CaldwellDevelopment Lead$345,000New York1937j.caldwell@datatables.net
Yuri BerryChief Marketing Officer (CMO)$675,000New York6154y.berry@datatables.net
Caesar VancePre-Sales Support$106,450New York8330c.vance@datatables.net
Doris WilderSales Assistant$85,600Sidney3023d.wilder@datatables.net
Angelica RamosChief Executive Officer (CEO)$1,200,000London5797a.ramos@datatables.net
Gavin JoyceDeveloper$92,575Edinburgh8822g.joyce@datatables.net
Jennifer ChangRegional Director$357,650Singapore9239j.chang@datatables.net
Brenden WagnerSoftware Engineer$206,850San Francisco1314b.wagner@datatables.net
Fiona GreenChief Operating Officer (COO)$850,000San Francisco2947f.green@datatables.net
Shou ItouRegional Marketing$163,000Tokyo8899s.itou@datatables.net
Michelle HouseIntegration Specialist$95,400Sidney2769m.house@datatables.net
Suki BurksDeveloper$114,500London6832s.burks@datatables.net
Prescott BartlettTechnical Author$145,000London3606p.bartlett@datatables.net
Gavin CortezTeam Leader$235,500San Francisco2860g.cortez@datatables.net
Martena MccrayPost-Sales support$324,050Edinburgh8240m.mccray@datatables.net
Unity ButlerMarketing Designer$85,675San Francisco5384u.butler@datatables.net
Howard HatfieldOffice Manager$164,500San Francisco7031h.hatfield@datatables.net
Hope FuentesSecretary$109,850San Francisco6318h.fuentes@datatables.net
Vivian HarrellFinancial Controller$452,500San Francisco9422v.harrell@datatables.net
Timothy MooneyOffice Manager$136,200London7580t.mooney@datatables.net
Jackson BradshawDirector$645,750New York1042j.bradshaw@datatables.net
Olivia LiangSupport Engineer$234,500Singapore2120o.liang@datatables.net
Bruno NashSoftware Engineer$163,500London6222b.nash@datatables.net
Sakura YamamotoSupport Engineer$139,575Tokyo9383s.yamamoto@datatables.net
Thor WaltonDeveloper$98,540New York8327t.walton@datatables.net
Finn CamachoSupport Engineer$87,500San Francisco2927f.camacho@datatables.net
Serge BaldwinData Coordinator$138,575Singapore8352s.baldwin@datatables.net
Zenaida FrankSoftware Engineer$125,250New York7439z.frank@datatables.net
Zorita SerranoSoftware Engineer$115,000San Francisco4389z.serrano@datatables.net
Jennifer AcostaJunior Javascript Developer$75,650Edinburgh3431j.acosta@datatables.net
Cara StevensSales Assistant$145,600New York3990c.stevens@datatables.net
Hermione ButlerRegional Director$356,250London1016h.butler@datatables.net
Lael GreerSystems Administrator$103,500London6733l.greer@datatables.net
Jonas AlexanderDeveloper$86,500San Francisco8196j.alexander@datatables.net
Shad DeckerRegional Director$183,000Edinburgh6373s.decker@datatables.net
Michael BruceJavascript Developer$183,000Singapore5384m.bruce@datatables.net
Donna SniderCustomer Support$112,000New York4226d.snider@datatables.net
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Complex headers (rowspan and colspan)

+
+

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

+ +

Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to attach the order listener, if more than one cell for a column if found. The orderCellsTop option can be used to tell DataTables to use the top cell if you prefer.

+ +

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

+ +
+ + +
NameHR InformationContact
PositionSalaryOfficeExtn.E-mail
NamePositionSalaryOfficeExtn.E-mail
Tiger NixonSystem Architect$320,800Edinburgh5421t.nixon@datatables.net
Garrett WintersAccountant$170,750Tokyo8422g.winters@datatables.net
Ashton CoxJunior Technical Author$86,000San Francisco1562a.cox@datatables.net
Cedric KellySenior Javascript Developer$433,060Edinburgh6224c.kelly@datatables.net
Airi SatouAccountant$162,700Tokyo5407a.satou@datatables.net
Brielle WilliamsonIntegration Specialist$372,000New York4804b.williamson@datatables.net
Herrod ChandlerSales Assistant$137,500San Francisco9608h.chandler@datatables.net
Rhona DavidsonIntegration Specialist$327,900Tokyo6200r.davidson@datatables.net
Colleen HurstJavascript Developer$205,500San Francisco2360c.hurst@datatables.net
Sonya FrostSoftware Engineer$103,600Edinburgh1667s.frost@datatables.net
Jena GainesOffice Manager$90,560London3814j.gaines@datatables.net
Quinn FlynnSupport Lead$342,000Edinburgh9497q.flynn@datatables.net
Charde MarshallRegional Director$470,600San Francisco6741c.marshall@datatables.net
Haley KennedySenior Marketing Designer$313,500London3597h.kennedy@datatables.net
Tatyana FitzpatrickRegional Director$385,750London1965t.fitzpatrick@datatables.net
Michael SilvaMarketing Designer$198,500London1581m.silva@datatables.net
Paul ByrdChief Financial Officer (CFO)$725,000New York3059p.byrd@datatables.net
Gloria LittleSystems Administrator$237,500New York1721g.little@datatables.net
Bradley GreerSoftware Engineer$132,000London2558b.greer@datatables.net
Dai RiosPersonnel Lead$217,500Edinburgh2290d.rios@datatables.net
Jenette CaldwellDevelopment Lead$345,000New York1937j.caldwell@datatables.net
Yuri BerryChief Marketing Officer (CMO)$675,000New York6154y.berry@datatables.net
Caesar VancePre-Sales Support$106,450New York8330c.vance@datatables.net
Doris WilderSales Assistant$85,600Sidney3023d.wilder@datatables.net
Angelica RamosChief Executive Officer (CEO)$1,200,000London5797a.ramos@datatables.net
Gavin JoyceDeveloper$92,575Edinburgh8822g.joyce@datatables.net
Jennifer ChangRegional Director$357,650Singapore9239j.chang@datatables.net
Brenden WagnerSoftware Engineer$206,850San Francisco1314b.wagner@datatables.net
Fiona GreenChief Operating Officer (COO)$850,000San Francisco2947f.green@datatables.net
Shou ItouRegional Marketing$163,000Tokyo8899s.itou@datatables.net
Michelle HouseIntegration Specialist$95,400Sidney2769m.house@datatables.net
Suki BurksDeveloper$114,500London6832s.burks@datatables.net
Prescott BartlettTechnical Author$145,000London3606p.bartlett@datatables.net
Gavin CortezTeam Leader$235,500San Francisco2860g.cortez@datatables.net
Martena MccrayPost-Sales support$324,050Edinburgh8240m.mccray@datatables.net
Unity ButlerMarketing Designer$85,675San Francisco5384u.butler@datatables.net
Howard HatfieldOffice Manager$164,500San Francisco7031h.hatfield@datatables.net
Hope FuentesSecretary$109,850San Francisco6318h.fuentes@datatables.net
Vivian HarrellFinancial Controller$452,500San Francisco9422v.harrell@datatables.net
Timothy MooneyOffice Manager$136,200London7580t.mooney@datatables.net
Jackson BradshawDirector$645,750New York1042j.bradshaw@datatables.net
Olivia LiangSupport Engineer$234,500Singapore2120o.liang@datatables.net
Bruno NashSoftware Engineer$163,500London6222b.nash@datatables.net
Sakura YamamotoSupport Engineer$139,575Tokyo9383s.yamamoto@datatables.net
Thor WaltonDeveloper$98,540New York8327t.walton@datatables.net
Finn CamachoSupport Engineer$87,500San Francisco2927f.camacho@datatables.net
Serge BaldwinData Coordinator$138,575Singapore8352s.baldwin@datatables.net
Zenaida FrankSoftware Engineer$125,250New York7439z.frank@datatables.net
Zorita SerranoSoftware Engineer$115,000San Francisco4389z.serrano@datatables.net
Jennifer AcostaJunior Javascript Developer$75,650Edinburgh3431j.acosta@datatables.net
Cara StevensSales Assistant$145,600New York3990c.stevens@datatables.net
Hermione ButlerRegional Director$356,250London1016h.butler@datatables.net
Lael GreerSystems Administrator$103,500London6733l.greer@datatables.net
Jonas AlexanderDeveloper$86,500San Francisco8196j.alexander@datatables.net
Shad DeckerRegional Director$183,000Edinburgh6373s.decker@datatables.net
Michael BruceJavascript Developer$183,000Singapore5384m.bruce@datatables.net
Donna SniderCustomer Support$112,000New York4226d.snider@datatables.net
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

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

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/dom.html b/examples/basic_init/dom.html index b132586a..4416c370 100644 --- a/examples/basic_init/dom.html +++ b/examples/basic_init/dom.html @@ -1,955 +1,259 @@ - + - - - - - DataTables example - DOM positioning - - - - - - - - - + - - -
-
-

DataTables example DOM positioning

-
-

When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. - To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the dom initialisation parameter which can be set to - indicate where you wish particular features to appear in the DOM. You can also specify div wrapping containers (with an id and / or class) to provide - complete layout flexibility.

-

Each HTML control element presented by DataTables is denoted by a single character in the dom option. For example the l option is used for the Length changing input - option.

-

The built-in options available are:

-
    -
  • l - Length changing
    • -
  • f - Filtering input
    • -
  • t - The Table!
    • -
  • i - Information
    • -
  • p - Pagination
    • -
  • r - pRocessing
    • -
  • < and > - div elements
    • -
  • <"#id" and > - div with an id
    • -
  • <"class" and > - div with a class
    • -
  • <"#id.class" and > - div with an id and class
    • + + + +
    +
    +

    DataTables example DOM positioning

    +
    +

    When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the dom initialisation parameter which can be set to indicate where you wish particular features to appear in the DOM. You can also specify div wrapping containers (with an id and / or class) to provide complete layout flexibility.

    + +

    Each HTML control element presented by DataTables is denoted by a single character in the dom option. For example the l option is used for the Length changing input option.

    + +

    The built-in options available are:

    + +
      +
    • l - Length changing
      • +
    • f - Filtering input
      • +
    • t - The Table!
      • +
    • i - Information
      • +
    • p - Pagination
      • +
    • r - pRocessing
      • +
    • < and > - div elements
      • +
    • <"#id" and > - div with an id
      • +
    • <"class" and > - div with a class
      • +
    • <"#id.class" and > - div with an id and class
      • +
    + +

    Example 1:

    + +
    <"wrapper"flipt>
+
    + +

    This results in the following DOM structure:

    + +
    <div class="wrapper">
+    { filter }
+    { length }
+    { info }
+    { paging }
+    { table }
+</div>
+
    + +

    Example 2:

    + +
    <lf<t>ip>
+
    + +

    This results in the following DOM structure:

    + +
    <div>
+    { length }
+    { filter }
+    <div>
+        { table }
+    </div>
+    { info }
+    { paging }
+</div>
+
    + +

    All options (with the exception of the t (table) option can be specified multiple times, for if you want to show the same control multiple times (pagination at the top and bottom of the table for example).

    + +

    Furthermore, note that additional dom options can be added to DataTables through the use of plug-ins.

    + +

    In the example below, the table information is moved to the top of the table, and all the interaction elements to the bottom, each wrapper in a container div.

    + +
    + + +
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
    Garrett WintersAccountantTokyo632011/07/25$170,750
    Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
    Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
    Airi SatouAccountantTokyo332008/11/28$162,700
    Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
    Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
    Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
    Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
    Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
    Jena GainesOffice ManagerLondon302008/12/19$90,560
    Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
    Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
    Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
    Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
    Michael SilvaMarketing DesignerLondon662012/11/27$198,500
    Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
    Gloria LittleSystems AdministratorNew York592009/04/10$237,500
    Bradley GreerSoftware EngineerLondon412012/10/13$132,000
    Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
    Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
    Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
    Caesar VancePre-Sales SupportNew York212011/12/12$106,450
    Doris WilderSales AssistantSidney232010/09/20$85,600
    Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
    Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
    Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
    Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
    Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
    Shou ItouRegional MarketingTokyo202011/08/14$163,000
    Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
    Suki BurksDeveloperLondon532009/10/22$114,500
    Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
    Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
    Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
    Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
    Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
    Hope FuentesSecretarySan Francisco412010/02/12$109,850
    Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
    Timothy MooneyOffice ManagerLondon372008/12/11$136,200
    Jackson BradshawDirectorNew York652008/09/26$645,750
    Olivia LiangSupport EngineerSingapore642011/02/03$234,500
    Bruno NashSoftware EngineerLondon382011/05/03$163,500
    Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
    Thor WaltonDeveloperNew York612013/08/11$98,540
    Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
    Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
    Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
    Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
    Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
    Cara StevensSales AssistantNew York462011/12/06$145,600
    Hermione ButlerRegional DirectorLondon472011/03/21$356,250
    Lael GreerSystems AdministratorLondon212009/02/27$103,500
    Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
    Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
    Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
    Donna SniderCustomer SupportNew York272011/01/25$112,000
    + +
      +
    • Javascript
      • +
    • HTML
      • +
    • CSS
      • +
    • Ajax
      • +
    • Server-side script
    -

    Example 1:

    - 
    -<"wrapper"flipt>
-
-
    -

    This results in the following DOM structure:

    - 
    -<div class="wrapper">
-	{ filter }
-	{ length }
-	{ info }
-	{ paging }
-	{ table }
-</div>
-
-
    -

    Example 2:

    - 
    -<lf<t>ip>
-
-
    -

    This results in the following DOM structure:

    - 
    -<div>
-	{ length }
-	{ filter }
-	<div>
-		{ table }
-	</div>
-	{ info }
-	{ paging }
-</div>
-
-
    -

    All options (with the exception of the t (table) option can be specified multiple times, for if you want to show the same control multiple times - (pagination at the top and bottom of the table for example).

    -

    Furthermore, note that additional dom - options can be added to DataTables through the use of plug-ins.

    -

    In the example below, the table information is moved to the top of the table, and all the interaction elements to the bottom, each wrapper in a container - div.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
    Garrett WintersAccountantTokyo632011/07/25$170,750
    Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
    Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
    Airi SatouAccountantTokyo332008/11/28$162,700
    Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
    Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
    Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
    Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
    Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
    Jena GainesOffice ManagerLondon302008/12/19$90,560
    Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
    Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
    Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
    Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
    Michael SilvaMarketing DesignerLondon662012/11/27$198,500
    Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
    Gloria LittleSystems AdministratorNew York592009/04/10$237,500
    Bradley GreerSoftware EngineerLondon412012/10/13$132,000
    Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
    Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
    Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
    Caesar VancePre-Sales SupportNew York212011/12/12$106,450
    Doris WilderSales AssistantSidney232010/09/20$85,600
    Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
    Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
    Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
    Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
    Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
    Shou ItouRegional MarketingTokyo202011/08/14$163,000
    Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
    Suki BurksDeveloperLondon532009/10/22$114,500
    Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
    Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
    Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
    Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
    Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
    Hope FuentesSecretarySan Francisco412010/02/12$109,850
    Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
    Timothy MooneyOffice ManagerLondon372008/12/11$136,200
    Jackson BradshawDirectorNew York652008/09/26$645,750
    Olivia LiangSupport EngineerSingapore642011/02/03$234,500
    Bruno NashSoftware EngineerLondon382011/05/03$163,500
    Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
    Thor WaltonDeveloperNew York612013/08/11$98,540
    Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
    Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
    Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
    Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
    Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
    Cara StevensSales AssistantNew York462011/12/06$145,600
    Hermione ButlerRegional DirectorLondon472011/03/21$356,250
    Lael GreerSystems AdministratorLondon212009/02/27$103,500
    Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
    Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
    Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
    Donna SniderCustomer SupportNew York272011/01/25$112,000
    -
      -
    • Javascript
      • -
    • HTML
      • -
    • CSS
      • -
    • Ajax
      • -
    • Server-side script
      • -
    -
    -
    -

    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"i>rt<"bottom"flp><"clear">' } ); } ); -

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

    - -
    -
    -

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

    -
    -
    -
    -

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

    + +

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

    + +
    +
    +

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

    +
    +
    +
    +

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

    + +
    + +

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

    + +
    +
    +

    This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

    +
    +
    +

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

    -
    -
    -

    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.

    +
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/filter_only.html b/examples/basic_init/filter_only.html index 43085fcc..3c1f6683 100644 --- a/examples/basic_init/filter_only.html +++ b/examples/basic_init/filter_only.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Feature enable / disable - - - - - - - - - + - - -
-
-

DataTables example Feature enable / disable

-
-

Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. A full list of the - options that can be used is available in the DataTables reference.

-

In the following example only the search feature is left enabled (which it is by default).

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Feature enable / disable

+
+

Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. A full list of the options that can be used is available in the DataTables reference.

+ +

In the following example only the search feature is left enabled (which it is by default).

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "paging": false, "ordering": false, "info": false } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/flexible_width.html b/examples/basic_init/flexible_width.html index b60e442f..7257495f 100644 --- a/examples/basic_init/flexible_width.html +++ b/examples/basic_init/flexible_width.html @@ -1,902 +1,206 @@ - + - - - - - DataTables example - Flexible table width - - - - - - - - - + - - -
-
-

DataTables example Flexible table width

-
-

Often you may want to have your table resize dynamically with the page. Typically this is done by assigning width:100% in your CSS, but this - presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the width - attribute to the HTML table tag or inline width style (style="width:100%"), it will be used as the width for the table (overruling any CSS - styles).

-

This example shows a table with width="100%" and the container is also flexible width, so as the window is resized, the table will also resize - dynamically.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Flexible table width

+
+

Often you may want to have your table resize dynamically with the page. Typically this is done by assigning width:100% in your CSS, but this presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the width attribute to the HTML table tag or inline width style (style="width:100%"), it will be used as the width for the table (overruling any CSS styles).

+ +

This example shows a table with width="100%" and the container is also flexible width, so as the window is resized, the table will also resize dynamically.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

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

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

div.container { + +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ div.container { width: 80%; } +
+ +

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.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/hidden_columns.html b/examples/basic_init/hidden_columns.html index 6f02a294..75e27f83 100644 --- a/examples/basic_init/hidden_columns.html +++ b/examples/basic_init/hidden_columns.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Hidden columns - - - - - - - - - + - - -
-
-

DataTables example Hidden columns

-
-

There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want - to reduce the amount of data shown on screen to make it clearer for the user (consider also using the Responsive extension for this). This is done through the columns.visible column option.

-

The column that is hidden is still part of the table and can be made visible through the api column().visible() API method at a future time if you - wish to have columns which can be shown and hidden.

-

Furthermore, as the hidden data is still part of the table, it can still, optionally, be filtered upon allowing the user access to that data (for example 'tag' - information for a row entry might used).

-

In the table below both the office and age version columns have been hidden, the former is not searchable, the latter is.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Hidden columns

+
+

There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want to reduce the amount of data shown on screen to make it clearer for the user (consider also using the Responsive extension for this). This is done through the columns.visible column option.

+ +

The column that is hidden is still part of the table and can be made visible through the api column().visible() API method at a future time if you wish to have columns which can be shown and hidden.

+ +

Furthermore, as the hidden data is still part of the table, it can still, optionally, be filtered upon allowing the user access to that data (for example 'tag' information for a row entry might used).

+ +

In the table below both the office and age version columns have been hidden, the former is not searchable, the latter is.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "columnDefs": [ { @@ -558,366 +76,153 @@ $(document).ready(function() { ] } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/index.html b/examples/basic_init/index.html index 66b31f4d..7790eaa9 100644 --- a/examples/basic_init/index.html +++ b/examples/basic_init/index.html @@ -1,100 +1,64 @@ - + - - - - - - - - - - DataTables examples - Basic initialisation - - -
+ + + + + + + + DataTables examples - Basic initialisation + + +
+
+

DataTables example Basic initialisation

+
+

DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The examples in this section demonstrate basic initialisation of DataTables and how it can be easily customised by passing an object with the options you want.

+ +
+
+
+
-

DataTables example Basic initialisation

-
-

DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The examples in this section demonstrate basic initialisation of - DataTables and how it can be easily customised by passing an object with the options you want.

-
-
-
-
-
-
-
-
-
-

Basic initialisation

- +
+
+
+
+

Basic initialisation

+
+ +
+

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

+ +

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

-
-

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

-

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

-
-
-
- +
+ \ No newline at end of file diff --git a/examples/basic_init/language.html b/examples/basic_init/language.html index bdc5233e..d71e598d 100644 --- a/examples/basic_init/language.html +++ b/examples/basic_init/language.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Language options - - - - - - - - - + - - -
-
-

DataTables example Language options

-
-

Changing the language information displayed by DataTables is as simple as passing in a language object to the DataTable constructor.

-

The example above shows a different set of English string being used, rather than the defaults.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Language options

+
+

Changing the language information displayed by DataTables is as simple as passing in a language object to the DataTable constructor.

+ +

The example above shows a different set of English string being used, rather than the defaults.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "language": { "lengthMenu": "Display _MENU_ records per page", @@ -544,366 +64,153 @@ $(document).ready(function() { } } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/multi_col_sort.html b/examples/basic_init/multi_col_sort.html index b63d293d..9da26cad 100644 --- a/examples/basic_init/multi_col_sort.html +++ b/examples/basic_init/multi_col_sort.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Multi-column ordering - - - - - - - - - + - - -
-
-

DataTables example Multi-column ordering

-
-

DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways:

-
    -
  • User shift click on a column (added the clicked column as a secondary, tertiary etc ordering column).
    • -
  • On a per-column basis (i.e. order by a specific column and then a secondary column if the data in the first column is identical), through the columns.orderData option. -
    • -
  • Using the columns.orderData option to specify a multiple column order by default (for example [ 0, 1 ]). -
    • -
  • Through the order() API method. -
    • + + + +
    +
    +

    DataTables example Multi-column ordering

    +
    +

    DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways:

    + +
      +
    • User shift click on a column (added the clicked column as a secondary, tertiary etc ordering column).
      • +
    • On a per-column basis (i.e. order by a specific column and then a secondary column if the data in the first column is identical), through the columns.orderData option.
      • +
    • Using the columns.orderData option to specify a multiple column order by default (for example [ 0, 1 ]).
      • +
    • Through the order() API method.
      • +
    + +

    Note that, the ability for the user to shift click to order multiple columns can be disabled through the orderMulti option.

    + +

    The example below shows the first column having a secondary order applied to the second column in the table, vice-versa for the second column being tied directly to the first and the salary column to the first name column.

    + +
    + + +
    First nameLast namePositionOfficeSalary
    TigerNixonSystem ArchitectEdinburgh$320,800
    GarrettWintersAccountantTokyo$170,750
    AshtonCoxJunior Technical AuthorSan Francisco$86,000
    CedricKellySenior Javascript DeveloperEdinburgh$433,060
    AiriSatouAccountantTokyo$162,700
    BrielleWilliamsonIntegration SpecialistNew York$372,000
    HerrodChandlerSales AssistantSan Francisco$137,500
    RhonaDavidsonIntegration SpecialistTokyo$327,900
    ColleenHurstJavascript DeveloperSan Francisco$205,500
    SonyaFrostSoftware EngineerEdinburgh$103,600
    JenaGainesOffice ManagerLondon$90,560
    QuinnFlynnSupport LeadEdinburgh$342,000
    ChardeMarshallRegional DirectorSan Francisco$470,600
    HaleyKennedySenior Marketing DesignerLondon$313,500
    TatyanaFitzpatrickRegional DirectorLondon$385,750
    MichaelSilvaMarketing DesignerLondon$198,500
    PaulByrdChief Financial Officer (CFO)New York$725,000
    GloriaLittleSystems AdministratorNew York$237,500
    BradleyGreerSoftware EngineerLondon$132,000
    DaiRiosPersonnel LeadEdinburgh$217,500
    JenetteCaldwellDevelopment LeadNew York$345,000
    YuriBerryChief Marketing Officer (CMO)New York$675,000
    CaesarVancePre-Sales SupportNew York$106,450
    DorisWilderSales AssistantSidney$85,600
    AngelicaRamosChief Executive Officer (CEO)London$1,200,000
    GavinJoyceDeveloperEdinburgh$92,575
    JenniferChangRegional DirectorSingapore$357,650
    BrendenWagnerSoftware EngineerSan Francisco$206,850
    FionaGreenChief Operating Officer (COO)San Francisco$850,000
    ShouItouRegional MarketingTokyo$163,000
    MichelleHouseIntegration SpecialistSidney$95,400
    SukiBurksDeveloperLondon$114,500
    PrescottBartlettTechnical AuthorLondon$145,000
    GavinCortezTeam LeaderSan Francisco$235,500
    MartenaMccrayPost-Sales supportEdinburgh$324,050
    UnityButlerMarketing DesignerSan Francisco$85,675
    HowardHatfieldOffice ManagerSan Francisco$164,500
    HopeFuentesSecretarySan Francisco$109,850
    VivianHarrellFinancial ControllerSan Francisco$452,500
    TimothyMooneyOffice ManagerLondon$136,200
    JacksonBradshawDirectorNew York$645,750
    OliviaLiangSupport EngineerSingapore$234,500
    BrunoNashSoftware EngineerLondon$163,500
    SakuraYamamotoSupport EngineerTokyo$139,575
    ThorWaltonDeveloperNew York$98,540
    FinnCamachoSupport EngineerSan Francisco$87,500
    SergeBaldwinData CoordinatorSingapore$138,575
    ZenaidaFrankSoftware EngineerNew York$125,250
    ZoritaSerranoSoftware EngineerSan Francisco$115,000
    JenniferAcostaJunior Javascript DeveloperEdinburgh$75,650
    CaraStevensSales AssistantNew York$145,600
    HermioneButlerRegional DirectorLondon$356,250
    LaelGreerSystems AdministratorLondon$103,500
    JonasAlexanderDeveloperSan Francisco$86,500
    ShadDeckerRegional DirectorEdinburgh$183,000
    MichaelBruceJavascript DeveloperSingapore$183,000
    DonnaSniderCustomer SupportNew York$112,000
    + +
      +
    • Javascript
      • +
    • HTML
      • +
    • CSS
      • +
    • Ajax
      • +
    • Server-side script
    -

    Note that, the ability for the user to shift click to order multiple columns can be disabled through the orderMulti option.

    -

    The example below shows the first column having a secondary order applied to the second column in the table, vice-versa for the second column being tied - directly to the first and the salary column to the first name column.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    First nameLast namePositionOfficeSalary
    TigerNixonSystem ArchitectEdinburgh$320,800
    GarrettWintersAccountantTokyo$170,750
    AshtonCoxJunior Technical AuthorSan Francisco$86,000
    CedricKellySenior Javascript DeveloperEdinburgh$433,060
    AiriSatouAccountantTokyo$162,700
    BrielleWilliamsonIntegration SpecialistNew York$372,000
    HerrodChandlerSales AssistantSan Francisco$137,500
    RhonaDavidsonIntegration SpecialistTokyo$327,900
    ColleenHurstJavascript DeveloperSan Francisco$205,500
    SonyaFrostSoftware EngineerEdinburgh$103,600
    JenaGainesOffice ManagerLondon$90,560
    QuinnFlynnSupport LeadEdinburgh$342,000
    ChardeMarshallRegional DirectorSan Francisco$470,600
    HaleyKennedySenior Marketing DesignerLondon$313,500
    TatyanaFitzpatrickRegional DirectorLondon$385,750
    MichaelSilvaMarketing DesignerLondon$198,500
    PaulByrdChief Financial Officer (CFO)New York$725,000
    GloriaLittleSystems AdministratorNew York$237,500
    BradleyGreerSoftware EngineerLondon$132,000
    DaiRiosPersonnel LeadEdinburgh$217,500
    JenetteCaldwellDevelopment LeadNew York$345,000
    YuriBerryChief Marketing Officer (CMO)New York$675,000
    CaesarVancePre-Sales SupportNew York$106,450
    DorisWilderSales AssistantSidney$85,600
    AngelicaRamosChief Executive Officer (CEO)London$1,200,000
    GavinJoyceDeveloperEdinburgh$92,575
    JenniferChangRegional DirectorSingapore$357,650
    BrendenWagnerSoftware EngineerSan Francisco$206,850
    FionaGreenChief Operating Officer (COO)San Francisco$850,000
    ShouItouRegional MarketingTokyo$163,000
    MichelleHouseIntegration SpecialistSidney$95,400
    SukiBurksDeveloperLondon$114,500
    PrescottBartlettTechnical AuthorLondon$145,000
    GavinCortezTeam LeaderSan Francisco$235,500
    MartenaMccrayPost-Sales supportEdinburgh$324,050
    UnityButlerMarketing DesignerSan Francisco$85,675
    HowardHatfieldOffice ManagerSan Francisco$164,500
    HopeFuentesSecretarySan Francisco$109,850
    VivianHarrellFinancial ControllerSan Francisco$452,500
    TimothyMooneyOffice ManagerLondon$136,200
    JacksonBradshawDirectorNew York$645,750
    OliviaLiangSupport EngineerSingapore$234,500
    BrunoNashSoftware EngineerLondon$163,500
    SakuraYamamotoSupport EngineerTokyo$139,575
    ThorWaltonDeveloperNew York$98,540
    FinnCamachoSupport EngineerSan Francisco$87,500
    SergeBaldwinData CoordinatorSingapore$138,575
    ZenaidaFrankSoftware EngineerNew York$125,250
    ZoritaSerranoSoftware EngineerSan Francisco$115,000
    JenniferAcostaJunior Javascript DeveloperEdinburgh$75,650
    CaraStevensSales AssistantNew York$145,600
    HermioneButlerRegional DirectorLondon$356,250
    LaelGreerSystems AdministratorLondon$103,500
    JonasAlexanderDeveloperSan Francisco$86,500
    ShadDeckerRegional DirectorEdinburgh$183,000
    MichaelBruceJavascript DeveloperSingapore$183,000
    DonnaSniderCustomer SupportNew York$112,000
    -
      -
    • Javascript
      • -
    • HTML
      • -
    • CSS
      • -
    • Ajax
      • -
    • Server-side script
      • -
    -
    -
    -

    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: [ { targets: [ 0 ], @@ -496,366 +80,153 @@ $(document).ready(function() { } ] } ); } ); -

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

    - -
    -
    -

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

    -
    -
    -
    -

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

    + +

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

    + +
    +
    +

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

    +
    +
    +
    +

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

    + +
    + +

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

    + +
    +
    +

    This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

    +
    +
    +

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

    -
    -
    -

    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.

    +
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/multiple_tables.html b/examples/basic_init/multiple_tables.html index e817cae1..51e105bd 100644 --- a/examples/basic_init/multiple_tables.html +++ b/examples/basic_init/multiple_tables.html @@ -1,614 +1,208 @@ - + - - - - - DataTables example - Multiple tables - - - - - - - - - + - - -
-
-

DataTables example Multiple tables

-
-

Often you might wish to initialise multiple tables with a single statement. This is trivially done by using a jQuery selector which will pick up multiple - tables.

-

The tables are independent for user control (i.e. user controlled paging on one table does not effect the others), but they do share the initialisation - parameters given (for example if you specific the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to manipulate both - together, or independently.

-

The example below shows two tables initialised with a single line of code, through the use of the table.display selector (i.e. select all elements - which have the class of table.display (which is suitable in this example, you might wish to use a different selector).

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeSalary
NamePositionOfficeAgeSalary
Tiger NixonSystem ArchitectEdinburgh61$320,800
Cedric KellySenior Javascript DeveloperEdinburgh22$433,060
Sonya FrostSoftware EngineerEdinburgh23$103,600
Quinn FlynnSupport LeadEdinburgh22$342,000
Dai RiosPersonnel LeadEdinburgh35$217,500
Gavin JoyceDeveloperEdinburgh42$92,575
Martena MccrayPost-Sales supportEdinburgh46$324,050
Jennifer AcostaJunior Javascript DeveloperEdinburgh43$75,650
Shad DeckerRegional DirectorEdinburgh51$183,000
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeSalary
NamePositionOfficeAgeSalary
Jena GainesOffice ManagerLondon30$90,560
Haley KennedySenior Marketing DesignerLondon43$313,500
Tatyana FitzpatrickRegional DirectorLondon19$385,750
Michael SilvaMarketing DesignerLondon66$198,500
Bradley GreerSoftware EngineerLondon41$132,000
Angelica RamosChief Executive Officer (CEO)London47$1,200,000
Suki BurksDeveloperLondon53$114,500
Prescott BartlettTechnical AuthorLondon27$145,000
Timothy MooneyOffice ManagerLondon37$136,200
Bruno NashSoftware EngineerLondon38$163,500
Hermione ButlerRegional DirectorLondon47$356,250
Lael GreerSystems AdministratorLondon21$103,500
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Multiple tables

+
+

Often you might wish to initialise multiple tables with a single statement. This is trivially done by using a jQuery selector which will pick up multiple tables.

+ +

The tables are independent for user control (i.e. user controlled paging on one table does not effect the others), but they do share the initialisation parameters given (for example if you specific the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to manipulate both together, or independently.

+ +

The example below shows two tables initialised with a single line of code, through the use of the table.display selector (i.e. select all elements which have the class of table.display (which is suitable in this example, you might wish to use a different selector).

+ +
+ + +
NamePositionOfficeAgeSalary
NamePositionOfficeAgeSalary
Tiger NixonSystem ArchitectEdinburgh61$320,800
Cedric KellySenior Javascript DeveloperEdinburgh22$433,060
Sonya FrostSoftware EngineerEdinburgh23$103,600
Quinn FlynnSupport LeadEdinburgh22$342,000
Dai RiosPersonnel LeadEdinburgh35$217,500
Gavin JoyceDeveloperEdinburgh42$92,575
Martena MccrayPost-Sales supportEdinburgh46$324,050
Jennifer AcostaJunior Javascript DeveloperEdinburgh43$75,650
Shad DeckerRegional DirectorEdinburgh51$183,000
NamePositionOfficeAgeSalary
NamePositionOfficeAgeSalary
Jena GainesOffice ManagerLondon30$90,560
Haley KennedySenior Marketing DesignerLondon43$313,500
Tatyana FitzpatrickRegional DirectorLondon19$385,750
Michael SilvaMarketing DesignerLondon66$198,500
Bradley GreerSoftware EngineerLondon41$132,000
Angelica RamosChief Executive Officer (CEO)London47$1,200,000
Suki BurksDeveloperLondon53$114,500
Prescott BartlettTechnical AuthorLondon27$145,000
Timothy MooneyOffice ManagerLondon37$136,200
Bruno NashSoftware EngineerLondon38$163,500
Hermione ButlerRegional DirectorLondon47$356,250
Lael GreerSystems AdministratorLondon21$103,500
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('table.display').DataTable(); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

div.dataTables_wrapper { + +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ div.dataTables_wrapper { margin-bottom: 3em; } +
+ +

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.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/scroll_x.html b/examples/basic_init/scroll_x.html index 28616cc2..7ba5b309 100644 --- a/examples/basic_init/scroll_x.html +++ b/examples/basic_init/scroll_x.html @@ -1,1072 +1,212 @@ - + - - - - - DataTables example - Scroll - horizontal - - - - - - - - - + - - -
-
-

DataTables example Scroll - horizontal

-
-

DataTables has the ability to show tables with horizontal scrolling, which is very useful for when you have a wide table, but want to constrain it to a limited - horizontal display area. To enable x-scrolling simply set the scrollX parameter to be whatever you want the container wrapper's width to be (this should be 100% in almost all - cases with the width being constrained by the container element).

-

The example below shows a table too wide for the containing element with x-scrolling enabled. The CSS option of th, td { white-space: nowrap; } is - also set to have the text content of each row on a single line (otherwise the browser will line break the text to have it fit into the available area).

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOfficeAgeStart dateSalaryExtn.E-mail
TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net
GarrettWintersAccountantTokyo632011/07/25$170,7508422g.winters@datatables.net
AshtonCoxJunior Technical AuthorSan Francisco662009/01/12$86,0001562a.cox@datatables.net
CedricKellySenior Javascript DeveloperEdinburgh222012/03/29$433,0606224c.kelly@datatables.net
AiriSatouAccountantTokyo332008/11/28$162,7005407a.satou@datatables.net
BrielleWilliamsonIntegration SpecialistNew York612012/12/02$372,0004804b.williamson@datatables.net
HerrodChandlerSales AssistantSan Francisco592012/08/06$137,5009608h.chandler@datatables.net
RhonaDavidsonIntegration SpecialistTokyo552010/10/14$327,9006200r.davidson@datatables.net
ColleenHurstJavascript DeveloperSan Francisco392009/09/15$205,5002360c.hurst@datatables.net
SonyaFrostSoftware EngineerEdinburgh232008/12/13$103,6001667s.frost@datatables.net
JenaGainesOffice ManagerLondon302008/12/19$90,5603814j.gaines@datatables.net
QuinnFlynnSupport LeadEdinburgh222013/03/03$342,0009497q.flynn@datatables.net
ChardeMarshallRegional DirectorSan Francisco362008/10/16$470,6006741c.marshall@datatables.net
HaleyKennedySenior Marketing DesignerLondon432012/12/18$313,5003597h.kennedy@datatables.net
TatyanaFitzpatrickRegional DirectorLondon192010/03/17$385,7501965t.fitzpatrick@datatables.net
MichaelSilvaMarketing DesignerLondon662012/11/27$198,5001581m.silva@datatables.net
PaulByrdChief Financial Officer (CFO)New York642010/06/09$725,0003059p.byrd@datatables.net
GloriaLittleSystems AdministratorNew York592009/04/10$237,5001721g.little@datatables.net
BradleyGreerSoftware EngineerLondon412012/10/13$132,0002558b.greer@datatables.net
DaiRiosPersonnel LeadEdinburgh352012/09/26$217,5002290d.rios@datatables.net
JenetteCaldwellDevelopment LeadNew York302011/09/03$345,0001937j.caldwell@datatables.net
YuriBerryChief Marketing Officer (CMO)New York402009/06/25$675,0006154y.berry@datatables.net
CaesarVancePre-Sales SupportNew York212011/12/12$106,4508330c.vance@datatables.net
DorisWilderSales AssistantSidney232010/09/20$85,6003023d.wilder@datatables.net
AngelicaRamosChief Executive Officer (CEO)London472009/10/09$1,200,0005797a.ramos@datatables.net
GavinJoyceDeveloperEdinburgh422010/12/22$92,5758822g.joyce@datatables.net
JenniferChangRegional DirectorSingapore282010/11/14$357,6509239j.chang@datatables.net
BrendenWagnerSoftware EngineerSan Francisco282011/06/07$206,8501314b.wagner@datatables.net
FionaGreenChief Operating Officer (COO)San Francisco482010/03/11$850,0002947f.green@datatables.net
ShouItouRegional MarketingTokyo202011/08/14$163,0008899s.itou@datatables.net
MichelleHouseIntegration SpecialistSidney372011/06/02$95,4002769m.house@datatables.net
SukiBurksDeveloperLondon532009/10/22$114,5006832s.burks@datatables.net
PrescottBartlettTechnical AuthorLondon272011/05/07$145,0003606p.bartlett@datatables.net
GavinCortezTeam LeaderSan Francisco222008/10/26$235,5002860g.cortez@datatables.net
MartenaMccrayPost-Sales supportEdinburgh462011/03/09$324,0508240m.mccray@datatables.net
UnityButlerMarketing DesignerSan Francisco472009/12/09$85,6755384u.butler@datatables.net
HowardHatfieldOffice ManagerSan Francisco512008/12/16$164,5007031h.hatfield@datatables.net
HopeFuentesSecretarySan Francisco412010/02/12$109,8506318h.fuentes@datatables.net
VivianHarrellFinancial ControllerSan Francisco622009/02/14$452,5009422v.harrell@datatables.net
TimothyMooneyOffice ManagerLondon372008/12/11$136,2007580t.mooney@datatables.net
JacksonBradshawDirectorNew York652008/09/26$645,7501042j.bradshaw@datatables.net
OliviaLiangSupport EngineerSingapore642011/02/03$234,5002120o.liang@datatables.net
BrunoNashSoftware EngineerLondon382011/05/03$163,5006222b.nash@datatables.net
SakuraYamamotoSupport EngineerTokyo372009/08/19$139,5759383s.yamamoto@datatables.net
ThorWaltonDeveloperNew York612013/08/11$98,5408327t.walton@datatables.net
FinnCamachoSupport EngineerSan Francisco472009/07/07$87,5002927f.camacho@datatables.net
SergeBaldwinData CoordinatorSingapore642012/04/09$138,5758352s.baldwin@datatables.net
ZenaidaFrankSoftware EngineerNew York632010/01/04$125,2507439z.frank@datatables.net
ZoritaSerranoSoftware EngineerSan Francisco562012/06/01$115,0004389z.serrano@datatables.net
JenniferAcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,6503431j.acosta@datatables.net
CaraStevensSales AssistantNew York462011/12/06$145,6003990c.stevens@datatables.net
HermioneButlerRegional DirectorLondon472011/03/21$356,2501016h.butler@datatables.net
LaelGreerSystems AdministratorLondon212009/02/27$103,5006733l.greer@datatables.net
JonasAlexanderDeveloperSan Francisco302010/07/14$86,5008196j.alexander@datatables.net
ShadDeckerRegional DirectorEdinburgh512008/11/13$183,0006373s.decker@datatables.net
MichaelBruceJavascript DeveloperSingapore292011/06/27$183,0005384m.bruce@datatables.net
DonnaSniderCustomer SupportNew York272011/01/25$112,0004226d.snider@datatables.net
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Scroll - horizontal

+
+

DataTables has the ability to show tables with horizontal scrolling, which is very useful for when you have a wide table, but want to constrain it to a limited horizontal display area. To enable x-scrolling simply set the scrollX parameter to be whatever you want the container wrapper's width to be (this should be 100% in almost all cases with the width being constrained by the container element).

+ +

The example below shows a table too wide for the containing element with x-scrolling enabled. The CSS option of th, td { white-space: nowrap; } is also set to have the text content of each row on a single line (otherwise the browser will line break the text to have it fit into the available area).

+ +
+ + +
First nameLast namePositionOfficeAgeStart dateSalaryExtn.E-mail
TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net
GarrettWintersAccountantTokyo632011/07/25$170,7508422g.winters@datatables.net
AshtonCoxJunior Technical AuthorSan Francisco662009/01/12$86,0001562a.cox@datatables.net
CedricKellySenior Javascript DeveloperEdinburgh222012/03/29$433,0606224c.kelly@datatables.net
AiriSatouAccountantTokyo332008/11/28$162,7005407a.satou@datatables.net
BrielleWilliamsonIntegration SpecialistNew York612012/12/02$372,0004804b.williamson@datatables.net
HerrodChandlerSales AssistantSan Francisco592012/08/06$137,5009608h.chandler@datatables.net
RhonaDavidsonIntegration SpecialistTokyo552010/10/14$327,9006200r.davidson@datatables.net
ColleenHurstJavascript DeveloperSan Francisco392009/09/15$205,5002360c.hurst@datatables.net
SonyaFrostSoftware EngineerEdinburgh232008/12/13$103,6001667s.frost@datatables.net
JenaGainesOffice ManagerLondon302008/12/19$90,5603814j.gaines@datatables.net
QuinnFlynnSupport LeadEdinburgh222013/03/03$342,0009497q.flynn@datatables.net
ChardeMarshallRegional DirectorSan Francisco362008/10/16$470,6006741c.marshall@datatables.net
HaleyKennedySenior Marketing DesignerLondon432012/12/18$313,5003597h.kennedy@datatables.net
TatyanaFitzpatrickRegional DirectorLondon192010/03/17$385,7501965t.fitzpatrick@datatables.net
MichaelSilvaMarketing DesignerLondon662012/11/27$198,5001581m.silva@datatables.net
PaulByrdChief Financial Officer (CFO)New York642010/06/09$725,0003059p.byrd@datatables.net
GloriaLittleSystems AdministratorNew York592009/04/10$237,5001721g.little@datatables.net
BradleyGreerSoftware EngineerLondon412012/10/13$132,0002558b.greer@datatables.net
DaiRiosPersonnel LeadEdinburgh352012/09/26$217,5002290d.rios@datatables.net
JenetteCaldwellDevelopment LeadNew York302011/09/03$345,0001937j.caldwell@datatables.net
YuriBerryChief Marketing Officer (CMO)New York402009/06/25$675,0006154y.berry@datatables.net
CaesarVancePre-Sales SupportNew York212011/12/12$106,4508330c.vance@datatables.net
DorisWilderSales AssistantSidney232010/09/20$85,6003023d.wilder@datatables.net
AngelicaRamosChief Executive Officer (CEO)London472009/10/09$1,200,0005797a.ramos@datatables.net
GavinJoyceDeveloperEdinburgh422010/12/22$92,5758822g.joyce@datatables.net
JenniferChangRegional DirectorSingapore282010/11/14$357,6509239j.chang@datatables.net
BrendenWagnerSoftware EngineerSan Francisco282011/06/07$206,8501314b.wagner@datatables.net
FionaGreenChief Operating Officer (COO)San Francisco482010/03/11$850,0002947f.green@datatables.net
ShouItouRegional MarketingTokyo202011/08/14$163,0008899s.itou@datatables.net
MichelleHouseIntegration SpecialistSidney372011/06/02$95,4002769m.house@datatables.net
SukiBurksDeveloperLondon532009/10/22$114,5006832s.burks@datatables.net
PrescottBartlettTechnical AuthorLondon272011/05/07$145,0003606p.bartlett@datatables.net
GavinCortezTeam LeaderSan Francisco222008/10/26$235,5002860g.cortez@datatables.net
MartenaMccrayPost-Sales supportEdinburgh462011/03/09$324,0508240m.mccray@datatables.net
UnityButlerMarketing DesignerSan Francisco472009/12/09$85,6755384u.butler@datatables.net
HowardHatfieldOffice ManagerSan Francisco512008/12/16$164,5007031h.hatfield@datatables.net
HopeFuentesSecretarySan Francisco412010/02/12$109,8506318h.fuentes@datatables.net
VivianHarrellFinancial ControllerSan Francisco622009/02/14$452,5009422v.harrell@datatables.net
TimothyMooneyOffice ManagerLondon372008/12/11$136,2007580t.mooney@datatables.net
JacksonBradshawDirectorNew York652008/09/26$645,7501042j.bradshaw@datatables.net
OliviaLiangSupport EngineerSingapore642011/02/03$234,5002120o.liang@datatables.net
BrunoNashSoftware EngineerLondon382011/05/03$163,5006222b.nash@datatables.net
SakuraYamamotoSupport EngineerTokyo372009/08/19$139,5759383s.yamamoto@datatables.net
ThorWaltonDeveloperNew York612013/08/11$98,5408327t.walton@datatables.net
FinnCamachoSupport EngineerSan Francisco472009/07/07$87,5002927f.camacho@datatables.net
SergeBaldwinData CoordinatorSingapore642012/04/09$138,5758352s.baldwin@datatables.net
ZenaidaFrankSoftware EngineerNew York632010/01/04$125,2507439z.frank@datatables.net
ZoritaSerranoSoftware EngineerSan Francisco562012/06/01$115,0004389z.serrano@datatables.net
JenniferAcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,6503431j.acosta@datatables.net
CaraStevensSales AssistantNew York462011/12/06$145,6003990c.stevens@datatables.net
HermioneButlerRegional DirectorLondon472011/03/21$356,2501016h.butler@datatables.net
LaelGreerSystems AdministratorLondon212009/02/27$103,5006733l.greer@datatables.net
JonasAlexanderDeveloperSan Francisco302010/07/14$86,5008196j.alexander@datatables.net
ShadDeckerRegional DirectorEdinburgh512008/11/13$183,0006373s.decker@datatables.net
MichaelBruceJavascript DeveloperSingapore292011/06/27$183,0005384m.bruce@datatables.net
DonnaSniderCustomer SupportNew York272011/01/25$112,0004226d.snider@datatables.net
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "scrollX": true } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

div.dataTables_wrapper { + +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ div.dataTables_wrapper { width: 800px; margin: 0 auto; } +
+ +

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.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/scroll_xy.html b/examples/basic_init/scroll_xy.html index 38a58b77..c9039d4b 100644 --- a/examples/basic_init/scroll_xy.html +++ b/examples/basic_init/scroll_xy.html @@ -1,31 +1,24 @@ - + - - - - - DataTables example - Scroll - horizontal and vertical - - - - - - - - - + - - -
-
-

DataTables example Scroll - horizontal and vertical

-
-

In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and - the scrolling accounts for this.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOfficeAgeStart dateSalaryExtn.E-mail
TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net
GarrettWintersAccountantTokyo632011/07/25$170,7508422g.winters@datatables.net
AshtonCoxJunior Technical AuthorSan Francisco662009/01/12$86,0001562a.cox@datatables.net
CedricKellySenior Javascript DeveloperEdinburgh222012/03/29$433,0606224c.kelly@datatables.net
AiriSatouAccountantTokyo332008/11/28$162,7005407a.satou@datatables.net
BrielleWilliamsonIntegration SpecialistNew York612012/12/02$372,0004804b.williamson@datatables.net
HerrodChandlerSales AssistantSan Francisco592012/08/06$137,5009608h.chandler@datatables.net
RhonaDavidsonIntegration SpecialistTokyo552010/10/14$327,9006200r.davidson@datatables.net
ColleenHurstJavascript DeveloperSan Francisco392009/09/15$205,5002360c.hurst@datatables.net
SonyaFrostSoftware EngineerEdinburgh232008/12/13$103,6001667s.frost@datatables.net
JenaGainesOffice ManagerLondon302008/12/19$90,5603814j.gaines@datatables.net
QuinnFlynnSupport LeadEdinburgh222013/03/03$342,0009497q.flynn@datatables.net
ChardeMarshallRegional DirectorSan Francisco362008/10/16$470,6006741c.marshall@datatables.net
HaleyKennedySenior Marketing DesignerLondon432012/12/18$313,5003597h.kennedy@datatables.net
TatyanaFitzpatrickRegional DirectorLondon192010/03/17$385,7501965t.fitzpatrick@datatables.net
MichaelSilvaMarketing DesignerLondon662012/11/27$198,5001581m.silva@datatables.net
PaulByrdChief Financial Officer (CFO)New York642010/06/09$725,0003059p.byrd@datatables.net
GloriaLittleSystems AdministratorNew York592009/04/10$237,5001721g.little@datatables.net
BradleyGreerSoftware EngineerLondon412012/10/13$132,0002558b.greer@datatables.net
DaiRiosPersonnel LeadEdinburgh352012/09/26$217,5002290d.rios@datatables.net
JenetteCaldwellDevelopment LeadNew York302011/09/03$345,0001937j.caldwell@datatables.net
YuriBerryChief Marketing Officer (CMO)New York402009/06/25$675,0006154y.berry@datatables.net
CaesarVancePre-Sales SupportNew York212011/12/12$106,4508330c.vance@datatables.net
DorisWilderSales AssistantSidney232010/09/20$85,6003023d.wilder@datatables.net
AngelicaRamosChief Executive Officer (CEO)London472009/10/09$1,200,0005797a.ramos@datatables.net
GavinJoyceDeveloperEdinburgh422010/12/22$92,5758822g.joyce@datatables.net
JenniferChangRegional DirectorSingapore282010/11/14$357,6509239j.chang@datatables.net
BrendenWagnerSoftware EngineerSan Francisco282011/06/07$206,8501314b.wagner@datatables.net
FionaGreenChief Operating Officer (COO)San Francisco482010/03/11$850,0002947f.green@datatables.net
ShouItouRegional MarketingTokyo202011/08/14$163,0008899s.itou@datatables.net
MichelleHouseIntegration SpecialistSidney372011/06/02$95,4002769m.house@datatables.net
SukiBurksDeveloperLondon532009/10/22$114,5006832s.burks@datatables.net
PrescottBartlettTechnical AuthorLondon272011/05/07$145,0003606p.bartlett@datatables.net
GavinCortezTeam LeaderSan Francisco222008/10/26$235,5002860g.cortez@datatables.net
MartenaMccrayPost-Sales supportEdinburgh462011/03/09$324,0508240m.mccray@datatables.net
UnityButlerMarketing DesignerSan Francisco472009/12/09$85,6755384u.butler@datatables.net
HowardHatfieldOffice ManagerSan Francisco512008/12/16$164,5007031h.hatfield@datatables.net
HopeFuentesSecretarySan Francisco412010/02/12$109,8506318h.fuentes@datatables.net
VivianHarrellFinancial ControllerSan Francisco622009/02/14$452,5009422v.harrell@datatables.net
TimothyMooneyOffice ManagerLondon372008/12/11$136,2007580t.mooney@datatables.net
JacksonBradshawDirectorNew York652008/09/26$645,7501042j.bradshaw@datatables.net
OliviaLiangSupport EngineerSingapore642011/02/03$234,5002120o.liang@datatables.net
BrunoNashSoftware EngineerLondon382011/05/03$163,5006222b.nash@datatables.net
SakuraYamamotoSupport EngineerTokyo372009/08/19$139,5759383s.yamamoto@datatables.net
ThorWaltonDeveloperNew York612013/08/11$98,5408327t.walton@datatables.net
FinnCamachoSupport EngineerSan Francisco472009/07/07$87,5002927f.camacho@datatables.net
SergeBaldwinData CoordinatorSingapore642012/04/09$138,5758352s.baldwin@datatables.net
ZenaidaFrankSoftware EngineerNew York632010/01/04$125,2507439z.frank@datatables.net
ZoritaSerranoSoftware EngineerSan Francisco562012/06/01$115,0004389z.serrano@datatables.net
JenniferAcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,6503431j.acosta@datatables.net
CaraStevensSales AssistantNew York462011/12/06$145,6003990c.stevens@datatables.net
HermioneButlerRegional DirectorLondon472011/03/21$356,2501016h.butler@datatables.net
LaelGreerSystems AdministratorLondon212009/02/27$103,5006733l.greer@datatables.net
JonasAlexanderDeveloperSan Francisco302010/07/14$86,5008196j.alexander@datatables.net
ShadDeckerRegional DirectorEdinburgh512008/11/13$183,0006373s.decker@datatables.net
MichaelBruceJavascript DeveloperSingapore292011/06/27$183,0005384m.bruce@datatables.net
DonnaSniderCustomer SupportNew York272011/01/25$112,0004226d.snider@datatables.net
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Scroll - horizontal and vertical

+
+

In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and the scrolling accounts for this.

+ +
+ + +
First nameLast namePositionOfficeAgeStart dateSalaryExtn.E-mail
TigerNixonSystem ArchitectEdinburgh612011/04/25$320,8005421t.nixon@datatables.net
GarrettWintersAccountantTokyo632011/07/25$170,7508422g.winters@datatables.net
AshtonCoxJunior Technical AuthorSan Francisco662009/01/12$86,0001562a.cox@datatables.net
CedricKellySenior Javascript DeveloperEdinburgh222012/03/29$433,0606224c.kelly@datatables.net
AiriSatouAccountantTokyo332008/11/28$162,7005407a.satou@datatables.net
BrielleWilliamsonIntegration SpecialistNew York612012/12/02$372,0004804b.williamson@datatables.net
HerrodChandlerSales AssistantSan Francisco592012/08/06$137,5009608h.chandler@datatables.net
RhonaDavidsonIntegration SpecialistTokyo552010/10/14$327,9006200r.davidson@datatables.net
ColleenHurstJavascript DeveloperSan Francisco392009/09/15$205,5002360c.hurst@datatables.net
SonyaFrostSoftware EngineerEdinburgh232008/12/13$103,6001667s.frost@datatables.net
JenaGainesOffice ManagerLondon302008/12/19$90,5603814j.gaines@datatables.net
QuinnFlynnSupport LeadEdinburgh222013/03/03$342,0009497q.flynn@datatables.net
ChardeMarshallRegional DirectorSan Francisco362008/10/16$470,6006741c.marshall@datatables.net
HaleyKennedySenior Marketing DesignerLondon432012/12/18$313,5003597h.kennedy@datatables.net
TatyanaFitzpatrickRegional DirectorLondon192010/03/17$385,7501965t.fitzpatrick@datatables.net
MichaelSilvaMarketing DesignerLondon662012/11/27$198,5001581m.silva@datatables.net
PaulByrdChief Financial Officer (CFO)New York642010/06/09$725,0003059p.byrd@datatables.net
GloriaLittleSystems AdministratorNew York592009/04/10$237,5001721g.little@datatables.net
BradleyGreerSoftware EngineerLondon412012/10/13$132,0002558b.greer@datatables.net
DaiRiosPersonnel LeadEdinburgh352012/09/26$217,5002290d.rios@datatables.net
JenetteCaldwellDevelopment LeadNew York302011/09/03$345,0001937j.caldwell@datatables.net
YuriBerryChief Marketing Officer (CMO)New York402009/06/25$675,0006154y.berry@datatables.net
CaesarVancePre-Sales SupportNew York212011/12/12$106,4508330c.vance@datatables.net
DorisWilderSales AssistantSidney232010/09/20$85,6003023d.wilder@datatables.net
AngelicaRamosChief Executive Officer (CEO)London472009/10/09$1,200,0005797a.ramos@datatables.net
GavinJoyceDeveloperEdinburgh422010/12/22$92,5758822g.joyce@datatables.net
JenniferChangRegional DirectorSingapore282010/11/14$357,6509239j.chang@datatables.net
BrendenWagnerSoftware EngineerSan Francisco282011/06/07$206,8501314b.wagner@datatables.net
FionaGreenChief Operating Officer (COO)San Francisco482010/03/11$850,0002947f.green@datatables.net
ShouItouRegional MarketingTokyo202011/08/14$163,0008899s.itou@datatables.net
MichelleHouseIntegration SpecialistSidney372011/06/02$95,4002769m.house@datatables.net
SukiBurksDeveloperLondon532009/10/22$114,5006832s.burks@datatables.net
PrescottBartlettTechnical AuthorLondon272011/05/07$145,0003606p.bartlett@datatables.net
GavinCortezTeam LeaderSan Francisco222008/10/26$235,5002860g.cortez@datatables.net
MartenaMccrayPost-Sales supportEdinburgh462011/03/09$324,0508240m.mccray@datatables.net
UnityButlerMarketing DesignerSan Francisco472009/12/09$85,6755384u.butler@datatables.net
HowardHatfieldOffice ManagerSan Francisco512008/12/16$164,5007031h.hatfield@datatables.net
HopeFuentesSecretarySan Francisco412010/02/12$109,8506318h.fuentes@datatables.net
VivianHarrellFinancial ControllerSan Francisco622009/02/14$452,5009422v.harrell@datatables.net
TimothyMooneyOffice ManagerLondon372008/12/11$136,2007580t.mooney@datatables.net
JacksonBradshawDirectorNew York652008/09/26$645,7501042j.bradshaw@datatables.net
OliviaLiangSupport EngineerSingapore642011/02/03$234,5002120o.liang@datatables.net
BrunoNashSoftware EngineerLondon382011/05/03$163,5006222b.nash@datatables.net
SakuraYamamotoSupport EngineerTokyo372009/08/19$139,5759383s.yamamoto@datatables.net
ThorWaltonDeveloperNew York612013/08/11$98,5408327t.walton@datatables.net
FinnCamachoSupport EngineerSan Francisco472009/07/07$87,5002927f.camacho@datatables.net
SergeBaldwinData CoordinatorSingapore642012/04/09$138,5758352s.baldwin@datatables.net
ZenaidaFrankSoftware EngineerNew York632010/01/04$125,2507439z.frank@datatables.net
ZoritaSerranoSoftware EngineerSan Francisco562012/06/01$115,0004389z.serrano@datatables.net
JenniferAcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,6503431j.acosta@datatables.net
CaraStevensSales AssistantNew York462011/12/06$145,6003990c.stevens@datatables.net
HermioneButlerRegional DirectorLondon472011/03/21$356,2501016h.butler@datatables.net
LaelGreerSystems AdministratorLondon212009/02/27$103,5006733l.greer@datatables.net
JonasAlexanderDeveloperSan Francisco302010/07/14$86,5008196j.alexander@datatables.net
ShadDeckerRegional DirectorEdinburgh512008/11/13$183,0006373s.decker@datatables.net
MichaelBruceJavascript DeveloperSingapore292011/06/27$183,0005384m.bruce@datatables.net
DonnaSniderCustomer SupportNew York272011/01/25$112,0004226d.snider@datatables.net
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "scrollY": 200, "scrollX": true } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

div.dataTables_wrapper { + +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ div.dataTables_wrapper { width: 800px; margin: 0 auto; } +
+ +

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.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/scroll_y.html b/examples/basic_init/scroll_y.html index 19c00efe..79fccd7b 100644 --- a/examples/basic_init/scroll_y.html +++ b/examples/basic_init/scroll_y.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Scroll - vertical - - - - - - - - - + - - -
-
-

DataTables example Scroll - vertical

-
-

This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for - displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine - with pagination enabled as well!).

-

To enable y-scrolling simply set the scrollY parameter to be whatever you want the container wrapper's height to be (any CSS measurement is acceptable, or - just a number which is treated as pixels).

-

Note also that the scrollCollapse option is enabled in this example. This will have the container match the height of the rows shown in - the table if that height is smaller than that given height by the scrollY.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Scroll - vertical

+
+

This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine with pagination enabled as well!).

+ +

To enable y-scrolling simply set the scrollY parameter to be whatever you want the container wrapper's height to be (any CSS measurement is acceptable, or just a number which is treated as pixels).

+ +

Note also that the scrollCollapse option is enabled in this example. This will have the container match the height of the rows shown in the table if that height is smaller than that given height by the scrollY.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "scrollY": "200px", "scrollCollapse": true, "paging": false } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/scroll_y_dynamic.html b/examples/basic_init/scroll_y_dynamic.html index 49e1bce4..08f1e461 100644 --- a/examples/basic_init/scroll_y_dynamic.html +++ b/examples/basic_init/scroll_y_dynamic.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Scroll - vertical, dynamic height - - - - - - - - - + - - -
-
-

DataTables example Scroll - vertical, dynamic height

-
-

This example shows a vertically scrolling DataTable that makes use of the CSS3 vh unit in order to dynamically resize the viewport based on the - browser window height. The vh unit is effectively a - percentage of the browser window height. So the 50vh used in this example is 50% of the window height. The viewport size will update dynamically as - the window is resized.

-

A relatively modern browser is required for vh units to operate correctly. IE9+ supports the - vh unit and all other evergreen browsers.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Scroll - vertical, dynamic height

+
+

This example shows a vertically scrolling DataTable that makes use of the CSS3 vh unit in order to dynamically resize the viewport based on the browser window height. The vh unit is effectively a percentage of the browser window height. So the 50vh used in this example is 50% of the window height. The viewport size will update dynamically as the window is resized.

+ +

A relatively modern browser is required for vh units to operate correctly. IE9+ supports the vh unit and all other evergreen browsers.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { scrollY: '50vh', scrollCollapse: true, paging: false } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/state_save.html b/examples/basic_init/state_save.html index f1140cca..4bd5510a 100644 --- a/examples/basic_init/state_save.html +++ b/examples/basic_init/state_save.html @@ -1,907 +1,208 @@ - + - - - - - DataTables example - State saving - - - - - - - - - + - - -
-
-

DataTables example State saving

-
-

DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user reloads - a page, or comes back to the page after visiting a sub-page. This state saving ability is enabled by the stateSave option.

-

The built in state saving method uses the HTML5 localStorage and sessionStorage APIs for efficient storage of the data. Please note - that this means that the built in state saving option will not work with IE6/7 as these browsers do not support these APIs. Alternative options of - using cookies or saving the state on the server through Ajax can be used through the stateSaveCallback and stateLoadCallback options.

-

The duration for which the saved state is valid and can be used to restore the table state can be set using the stateDuration initialisation parameter - (2 hours by default). This parameter also controls if localStorage (0 or greater) or sessionStorage (-1) is used to store the data.

-

The example below simply shows state saving enabled in DataTables with the stateSave option.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example State saving

+
+

DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user reloads a page, or comes back to the page after visiting a sub-page. This state saving ability is enabled by the stateSave option.

+ +

The built in state saving method uses the HTML5 localStorage and sessionStorage APIs for efficient storage of the data. Please note that this means that the built in state saving option will not work with IE6/7 as these browsers do not support these APIs. Alternative options of using cookies or saving the state on the server through Ajax can be used through the stateSaveCallback and stateLoadCallback options.

+ +

The duration for which the saved state is valid and can be used to restore the table state can be set using the stateDuration initialisation parameter (2 hours by default). This parameter also controls if localStorage (0 or greater) or sessionStorage (-1) is used to store the data.

+ +

The example below simply shows state saving enabled in DataTables with the stateSave option.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { stateSave: true } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/table_sorting.html b/examples/basic_init/table_sorting.html index 63a6df41..76f7a7e8 100644 --- a/examples/basic_init/table_sorting.html +++ b/examples/basic_init/table_sorting.html @@ -1,902 +1,206 @@ - + - - - - - DataTables example - Default ordering (sorting) - - - - - - - - - + - - -
-
-

DataTables example Default ordering (sorting)

-
-

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

-

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

-

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

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Default ordering (sorting)

+
+

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

+ +

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

+ +

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

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "order": [[ 3, "desc" ]] } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/basic_init/zero_configuration.html b/examples/basic_init/zero_configuration.html index 08e537b2..1d334f33 100644 --- a/examples/basic_init/zero_configuration.html +++ b/examples/basic_init/zero_configuration.html @@ -1,895 +1,202 @@ - + - - - - - DataTables example - Zero configuration - - - - - - - - - + - - -
-
-

DataTables example Zero configuration

-
-

DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: - $().DataTable();.

-

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

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Zero configuration

+
+

DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function: $().DataTable();.

+ +

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

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

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

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/data_sources/ajax.html b/examples/data_sources/ajax.html index e578efe4..1114b910 100644 --- a/examples/data_sources/ajax.html +++ b/examples/data_sources/ajax.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Ajax sourced data - - - - - - - - - + - - -
-
-

DataTables example Ajax sourced data

-
-

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 ajax option to the address of the - JSON data source.

-

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

-

The example below shows DataTables loading data for a table from arrays as the data source (object parameters can also be used through the columns.data option ).

-
- - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Ajax sourced data

+
+

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 ajax option to the address of the JSON data source.

+ +

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

+ +

The example below shows DataTables loading data for a table from arrays as the data source (object parameters can also be used through the columns.data option ).

+ +
+ + +
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "ajax": '../ajax/data/arrays.txt' } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/data_sources/dom.html b/examples/data_sources/dom.html index 1efcc53a..693281c6 100644 --- a/examples/data_sources/dom.html +++ b/examples/data_sources/dom.html @@ -1,896 +1,202 @@ - + - - - - - DataTables example - HTML (DOM) sourced data - - - - - - - - - + - - -
-
-

DataTables example HTML (DOM) sourced data

-
-

The foundation for DataTables is progressive enhancement, so it is very adept at reading table information directly from the DOM. This example shows how easy it - is to add searching, ordering and paging to your HTML table by simply running DataTables on it.

-

For further and more complex examples of using DataTables with DOM sourced data, please refer to the basic initialisation and - advanced examples.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example HTML (DOM) sourced data

+
+

The foundation for DataTables is progressive enhancement, so it is very adept at reading table information directly from the DOM. This example shows how easy it is to add searching, ordering and paging to your HTML table by simply running DataTables on it.

+ +

For further and more complex examples of using DataTables with DOM sourced data, please refer to the basic initialisation and advanced examples.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

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

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/data_sources/index.html b/examples/data_sources/index.html index dbabee2e..0d179412 100644 --- a/examples/data_sources/index.html +++ b/examples/data_sources/index.html @@ -1,68 +1,60 @@ - + - - - - - - - - - - DataTables examples - Data sources - - -
+ + + + + + + + DataTables examples - Data sources + + +
+
+

DataTables example Data sources

+
+

DataTables can obtain data from four different fundamental sources:

+ +
    +
  • HTML document (DOM)
    • +
  • Javascript (array / objects)
    • +
  • Ajax sourced data with client-side processing
    • +
  • Ajax sourced data with server-side processing
    • +
+ +

Which of these options is used to populate the table with data depends upon how the table is initialised. The examples in this section show these four different data source types.

+ +
+
+
+
-

DataTables example Data sources

-
-

DataTables can obtain data from four different fundamental sources:

-
    -
  • HTML document (DOM)
    • -
  • Javascript (array / objects)
    • -
  • Ajax sourced data with client-side processing
    • -
  • Ajax sourced data with server-side processing
    • -
-

Which of these options is used to populate the table with data depends upon how the table is initialised. The examples in this section show these four different - data source types.

-
-
-
-
-
-
-
-
-
-

Data sources

- +
+
+
+
+

Data sources

+
+ +
+

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

+ +

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

-
-

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

-

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

-
-
-
- +
+ \ No newline at end of file diff --git a/examples/data_sources/js_array.html b/examples/data_sources/js_array.html index bbd12983..c554f3cb 100644 --- a/examples/data_sources/js_array.html +++ b/examples/data_sources/js_array.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Javascript sourced data - - - - - - - - - + - - -
-
-

DataTables example Javascript sourced data

-
-

At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document. This - is achieved using the data option in the - initialisation object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the columns.data option).

-

A table must be available on the page for DataTables to use. This examples shows an empty table element being initialising as a DataTable with a set of data from a Javascript array. The columns in the table are dynamically created - based on the columns.title - configuration option.

-
-
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

var dataSet = [ + + + +
+
+

DataTables example Javascript sourced data

+
+

At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document. This is achieved using the data option in the initialisation object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the columns.data option).

+ +

A table must be available on the page for DataTables to use. This examples shows an empty table element being initialising as a DataTable with a set of data from a Javascript array. The columns in the table are dynamically created based on the columns.title configuration option.

+ +
+ + +
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ var dataSet = [ [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ], [ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ], [ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ], @@ -154,366 +148,153 @@ $(document).ready(function() { ] } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/data_sources/server_side.html b/examples/data_sources/server_side.html index deeadbac..46f66bc5 100644 --- a/examples/data_sources/server_side.html +++ b/examples/data_sources/server_side.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Server-side processing - - - - - - - - - + - - -
-
-

DataTables example Server-side processing

-
-

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

-

Server-side processing is enabled by setting the serverSide option to true and providing an Ajax data source through the ajax option.

-

This example shows a very simple table, matching the other examples, but in this instance using server-side processing. For further and more complex examples of - using server-side processing, please refer to the server-side processing examples.

-
- - - - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

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

DataTables example Server-side processing

+
+

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

+ +

Server-side processing is enabled by setting the serverSide option to true and providing an Ajax data source through the ajax option.

+ +

This example shows a very simple table, matching the other examples, but in this instance using server-side processing. For further and more complex examples of using server-side processing, please refer to the server-side processing examples.

+ +
+ + +
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $(document).ready(function() { $('#example').DataTable( { "processing": true, "serverSide": true, "ajax": "../server_side/scripts/server_processing.php" } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index 15c1dfb3..de3c9805 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,352 +1,143 @@ - + - - - - - - - - - - DataTables examples - Examples index - - -
+ + + + + + + + DataTables examples - Examples index + + +
+
+

DataTables example Examples index

+
+

One of the best ways to learn how to do anything new (including software APIs!) is to get your hands dirty as quickly as possible. These examples will show you how to perform tasks ranging from something as simple as applying DataTables to an HTML table, right the way through to doing server-side processing with pipelining and custom plug-in functions.

+ +
+
+
+
-

DataTables example Examples index

-
-

One of the best ways to learn how to do anything new (including software APIs!) is to get your hands dirty as quickly as possible. These examples will show you - how to perform tasks ranging from something as simple as applying DataTables to an HTML table, right the way through to doing server-side processing with - pipelining and custom plug-in functions.

+
+
+
+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
+
-
-
-
-
-
-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/plug-ins/api.html b/examples/plug-ins/api.html index 35bc55bc..6083ac69 100644 --- a/examples/plug-ins/api.html +++ b/examples/plug-ins/api.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - API plug-in methods - - - - - - - - - + - - -
-
-

DataTables example API plug-in methods

-
-

The DataTables API is designed to be fully extensible, with custom functions being very easy to add using the $.fn.dataTable.Api.register function. - This function takes two arguments; the first being the name of the method to be added and its chaining hierarchy, and the second the function itself.

-

This example shows how a sum() method can easily be added to the Api so you can get the sum of a column in a single line: - table.column().data().sum(). Due to the chaining of the methods, this allows sum() to very easily give the sum for any selected column, - and to limit the sum to just the current page, filtered data or all pages. This is done using the options for the column() method and the options for its selectors.

-

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

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$.fn.dataTable.Api.register( 'column().data().sum()', function () { + + + +
+
+

DataTables example API plug-in methods

+
+

The DataTables API is designed to be fully extensible, with custom functions being very easy to add using the $.fn.dataTable.Api.register function. This function takes two arguments; the first being the name of the method to be added and its chaining hierarchy, and the second the function itself.

+ +

This example shows how a sum() method can easily be added to the Api so you can get the sum of a column in a single line: table.column().data().sum(). Due to the chaining of the methods, this allows sum() to very easily give the sum for any selected column, and to limit the sum to just the current page, filtered data or all pages. This is done using the options for the column() method and the options for its selectors.

+ +

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

+ +
+ +
+
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ $.fn.dataTable.Api.register( 'column().data().sum()', function () { return this.reduce( function (a, b) { var x = parseFloat( a ) || 0; var y = parseFloat( b ) || 0; @@ -577,366 +94,153 @@ $(document).ready(function() { alert( 'Column sum is: '+ table.column( 3, {page:'current'} ).data().sum() ); } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/plug-ins/dom_sort.html b/examples/plug-ins/dom_sort.html index 55f5c052..4a8af3bc 100644 --- a/examples/plug-ins/dom_sort.html +++ b/examples/plug-ins/dom_sort.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Live DOM ordering - - - - - - - - - + - - -
-
-

DataTables example Live DOM ordering

-
-

This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's - initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not - reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is - much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.

-

The example below shows the first two columns as normal text with ordering as you would expect. The following columns all have a form input element of different - kinds, and the information contained within is what DataTables will perform the order on, based on the value at the time of the order.

-

This is a fairly simple example, but it you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit - yourself. You could also update the ordering live as a user in entered data into a form using an event handler calling order() or draw() methods.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NameAgePositionOffice
NameAgePositionOffice
Tiger Nixon
Garrett Winters
Ashton Cox
Cedric Kelly
Airi Satou
Brielle Williamson
Herrod Chandler
Rhona Davidson
Colleen Hurst
Sonya Frost
Jena Gaines
Quinn Flynn
Charde Marshall
Haley Kennedy
Tatyana Fitzpatrick
Michael Silva
Paul Byrd
Gloria Little
Bradley Greer
Dai Rios
Jenette Caldwell
Yuri Berry
Caesar Vance
Doris Wilder
Angelica Ramos
Gavin Joyce
Jennifer Chang
Brenden Wagner
Fiona Green
Shou Itou
Michelle House
Suki Burks
Prescott Bartlett
Gavin Cortez
Martena Mccray
Unity Butler
Howard Hatfield
Hope Fuentes
Vivian Harrell
Timothy Mooney
Jackson Bradshaw
Olivia Liang
Bruno Nash
Sakura Yamamoto
Thor Walton
Finn Camacho
Serge Baldwin
Zenaida Frank
Zorita Serrano
Jennifer Acosta
Cara Stevens
Hermione Butler
Lael Greer
Jonas Alexander
Shad Decker
Michael Bruce
Donna Snider
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

/* Create an array with the values of all the input boxes in a column */ + + + +
+
+

DataTables example Live DOM ordering

+
+

This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.

+ +

The example below shows the first two columns as normal text with ordering as you would expect. The following columns all have a form input element of different kinds, and the information contained within is what DataTables will perform the order on, based on the value at the time of the order.

+ +

This is a fairly simple example, but it you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit yourself. You could also update the ordering live as a user in entered data into a form using an event handler calling order() or draw() methods.

+ +
+ + +
NameAgePositionOffice
NameAgePositionOffice
Tiger Nixon
Garrett Winters
Ashton Cox
Cedric Kelly
Airi Satou
Brielle Williamson
Herrod Chandler
Rhona Davidson
Colleen Hurst
Sonya Frost
Jena Gaines
Quinn Flynn
Charde Marshall
Haley Kennedy
Tatyana Fitzpatrick
Michael Silva
Paul Byrd
Gloria Little
Bradley Greer
Dai Rios
Jenette Caldwell
Yuri Berry
Caesar Vance
Doris Wilder
Angelica Ramos
Gavin Joyce
Jennifer Chang
Brenden Wagner
Fiona Green
Shou Itou
Michelle House
Suki Burks
Prescott Bartlett
Gavin Cortez
Martena Mccray
Unity Butler
Howard Hatfield
Hope Fuentes
Vivian Harrell
Timothy Mooney
Jackson Bradshaw
Olivia Liang
Bruno Nash
Sakura Yamamoto
Thor Walton
Finn Camacho
Serge Baldwin
Zenaida Frank
Zorita Serrano
Jennifer Acosta
Cara Stevens
Hermione Butler
Lael Greer
Jonas Alexander
Shad Decker
Michael Bruce
Donna Snider
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ /* Create an array with the values of all the input boxes in a column */ $.fn.dataTable.ext.order['dom-text'] = function ( settings, col ) { return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) { @@ -1411,366 +132,153 @@ $(document).ready(function() { ] } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/plug-ins/index.html b/examples/plug-ins/index.html index 1aa77765..30534eb5 100644 --- a/examples/plug-ins/index.html +++ b/examples/plug-ins/index.html @@ -1,66 +1,54 @@ - + - - - - - - - - - - DataTables examples - Plug-ins - - -
+ + + + + + + + DataTables examples - Plug-ins + + +
+
+

DataTables example Plug-ins

+
+

While DataTables has a wide range of options and data type support built in, it can never cater for every type of data out of the box. For this reason, DataTables exposes an extension API which allows you, the developers using DataTables, to add support for your own data types, searching, ordering and feature plug-ins.

+ +

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

+ +
+
+
+
-

DataTables example Plug-ins

-
-

While DataTables has a wide range of options and data type support built in, it can never cater for every type of data out of the box. For this reason, - DataTables exposes an extension API which allows you, the developers using DataTables, to add support for your own data types, searching, ordering and feature - plug-ins.

-

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

-
-
-
-
-
-
-
-
-
-

Plug-ins

- +
+
+
+
+

Plug-ins

+
+ +
+

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

+ +

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

-
-

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

-

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

-
-
-
- +
+ \ No newline at end of file diff --git a/examples/plug-ins/range_filtering.html b/examples/plug-ins/range_filtering.html index 54ef9d80..42a5a3d6 100644 --- a/examples/plug-ins/range_filtering.html +++ b/examples/plug-ins/range_filtering.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Custom filtering - range search - - - - - - - - - + - - -
-
-

DataTables example Custom filtering - range search

-
-

There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range search (in between two - numbers) and date range search. DataTables provide an API method to add your own search functions, $.fn.dataTable.ext.search. This is an array of - functions (push your own onto it) which will will be run at table draw time to see if a particular row should be included or not.

-

This example shows a search being performed on the age column in the data, based upon two inputs.

-
- - - - - - - - - -
Minimum age:
Maximum age:
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

/* Custom filtering function which will search data in column four between two values */ + + + +
+
+

DataTables example Custom filtering - range search

+
+

There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range search (in between two numbers) and date range search. DataTables provide an API method to add your own search functions, $.fn.dataTable.ext.search. This is an array of functions (push your own onto it) which will will be run at table draw time to see if a particular row should be included or not.

+ +

This example shows a search being performed on the age column in the data, based upon two inputs.

+ +
+ + + + + + + + + + +
Minimum age:
Maximum age:
+
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

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

+ /* Custom filtering function which will search data in column four between two values */ $.fn.dataTable.ext.search.push( function( settings, data, dataIndex ) { var min = parseInt( $('#min').val(), 10 ); @@ -587,366 +105,153 @@ $(document).ready(function() { table.draw(); } ); } ); -

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

- -
-
-

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

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

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

+ +
+
+

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

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

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

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

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

+ +

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

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

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

-

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

-
-
-
-
- + \ No newline at end of file diff --git a/examples/plug-ins/sorting_auto.html b/examples/plug-ins/sorting_auto.html index 1c64e899..14a6c9a6 100644 --- a/examples/plug-ins/sorting_auto.html +++ b/examples/plug-ins/sorting_auto.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Ordering plug-ins (with type detection) - - - - - - - - - + - - -
-
-

DataTables example Ordering plug-ins (with type detection)

-
-

Although DataTables will automatically order data from a number of different data types using the built in methods, When dealing with more complex formatted - data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any manner you wish.

-

Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in assigned to it by making use of DataTables' plug-in type - detection abilities. For complete information about type detection and ordering plug-ins; creating them and their requirements, please refer to the plug-in - development documentation.

-

This example shows ordering with using an enumerated type.

-

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

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25Low
Garrett WintersAccountantTokyo632011/07/25Low
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12Low
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29Medium
Airi SatouAccountantTokyo332008/11/28Low
Brielle WilliamsonIntegration SpecialistNew York612012/12/02Medium
Herrod ChandlerSales AssistantSan Francisco592012/08/06Low
Rhona DavidsonIntegration SpecialistTokyo552010/10/14Low
Colleen HurstJavascript DeveloperSan Francisco392009/09/15Low
Sonya FrostSoftware EngineerEdinburgh232008/12/13Low
Jena GainesOffice ManagerLondon302008/12/19Low
Quinn FlynnSupport LeadEdinburgh222013/03/03Low
Charde MarshallRegional DirectorSan Francisco362008/10/16Medium
Haley KennedySenior Marketing DesignerLondon432012/12/18Low
Tatyana FitzpatrickRegional DirectorLondon192010/03/17Medium
Michael SilvaMarketing DesignerLondon662012/11/27Low
Paul ByrdChief Financial Officer (CFO)New York642010/06/09High
Gloria LittleSystems AdministratorNew York592009/04/10Low
Bradley GreerSoftware EngineerLondon412012/10/13Low
Dai RiosPersonnel LeadEdinburgh352012/09/26Low
Jenette CaldwellDevelopment LeadNew York302011/09/03Low
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25High
Caesar VancePre-Sales SupportNew York212011/12/12Low
Doris WilderSales AssistantSidney232010/09/20Low
Angelica RamosChief Executive Officer (CEO)London472009/10/09High
Gavin JoyceDeveloperEdinburgh422010/12/22Low
Jennifer ChangRegional DirectorSingapore282010/11/14Medium
Brenden WagnerSoftware EngineerSan Francisco282011/06/07Low
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11High
Shou ItouRegional MarketingTokyo202011/08/14Low
Michelle HouseIntegration SpecialistSidney372011/06/02Low
Suki BurksDeveloperLondon532009/10/22Low
Prescott BartlettTechnical AuthorLondon272011/05/07Low
Gavin CortezTeam LeaderSan Francisco222008/10/26Low
Martena MccrayPost-Sales supportEdinburgh462011/03/09Low
Unity ButlerMarketing DesignerSan Francisco472009/12/09Low
Howard HatfieldOffice ManagerSan Francisco512008/12/16Low
Hope FuentesSecretarySan Francisco412010/02/12Low
Vivian HarrellFinancial ControllerSan Francisco622009/02/14Medium
Timothy MooneyOffice ManagerLondon372008/12/11Low
Jackson BradshawDirectorNew York652008/09/26Medium
Olivia LiangSupport EngineerSingapore642011/02/03Low
Bruno NashSoftware EngineerLondon382011/05/03Low
Sakura YamamotoSupport EngineerTokyo372009/08/19Low
Thor WaltonDeveloperNew York612013/08/11Low
Finn CamachoSupport EngineerSan Francisco472009/07/07Low
Serge BaldwinData CoordinatorSingapore642012/04/09Low
Zenaida FrankSoftware EngineerNew York632010/01/04Low
Zorita SerranoSoftware EngineerSan Francisco562012/06/01Low
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01Low
Cara StevensSales AssistantNew York462011/12/06Low
Hermione ButlerRegional DirectorLondon472011/03/21Medium
Lael GreerSystems AdministratorLondon212009/02/27Low
Jonas AlexanderDeveloperSan Francisco302010/07/14Low
Shad DeckerRegional DirectorEdinburgh512008/11/13Low
Michael BruceJavascript DeveloperSingapore292011/06/27Low
Donna SniderCustomer SupportNew York272011/01/25Low
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

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

$.fn.dataTable.ext.type.detect.unshift( + + + +
+
+

DataTables example Ordering plug-ins (with type detection)

+
+

Although DataTables will automatically order data from a number of different data types using the built in methods, When dealing with more complex formatted data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any manner you wish.

+ +

Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in assigned to it by making use of DataTables' plug-in type detection abilities. For complete information about type detection and ordering plug-ins; creating them and their requirements, please refer to the plug-in development documentation.

+ +

This example shows ordering with using an enumerated type.

+ +

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

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25Low
Garrett WintersAccountantTokyo632011/07/25Low
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12Low
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29Medium
Airi SatouAccountantTokyo332008/11/28Low
Brielle WilliamsonIntegration SpecialistNew York612012/12/02Medium
Herrod ChandlerSales AssistantSan Francisco592012/08/06Low
Rhona DavidsonIntegration SpecialistTokyo552010/10/14Low
Colleen HurstJavascript DeveloperSan Francisco392009/09/15Low
Sonya FrostSoftware EngineerEdinburgh232008/12/13Low
Jena GainesOffice ManagerLondon302008/12/19Low
Quinn FlynnSupport LeadEdinburgh222013/03/03Low
Charde MarshallRegional DirectorSan Francisco362008/10/16Medium
Haley KennedySenior Marketing DesignerLondon432012/12/18Low
Tatyana FitzpatrickRegional DirectorLondon192010/03/17Medium
Michael SilvaMarketing DesignerLondon662012/11/27Low
Paul ByrdChief Financial Officer (CFO)New York642010/06/09High
Gloria LittleSystems AdministratorNew York592009/04/10Low
Bradley GreerSoftware EngineerLondon412012/10/13Low
Dai RiosPersonnel LeadEdinburgh352012/09/26Low
Jenette CaldwellDevelopment LeadNew York302011/09/03Low
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25High
Caesar VancePre-Sales SupportNew York212011/12/12Low
Doris WilderSales AssistantSidney232010/09/20Low
Angelica RamosChief Executive Officer (CEO)London472009/10/09High
Gavin JoyceDeveloperEdinburgh422010/12/22Low
Jennifer ChangRegional DirectorSingapore282010/11/14Medium
Brenden WagnerSoftware EngineerSan Francisco282011/06/07Low
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11High
Shou ItouRegional MarketingTokyo202011/08/14Low
Michelle HouseIntegration SpecialistSidney372011/06/02Low
Suki BurksDeveloperLondon532009/10/22Low
Prescott BartlettTechnical AuthorLondon272011/05/07Low
Gavin CortezTeam LeaderSan Francisco222008/10/26Low
Martena MccrayPost-Sales supportEdinburgh462011/03/09Low
Unity ButlerMarketing DesignerSan Francisco472009/12/09Low
Howard HatfieldOffice ManagerSan Francisco512008/12/16Low
Hope FuentesSecretarySan Francisco412010/02/12Low
Vivian HarrellFinancial ControllerSan Francisco622009/02/14Medium
Timothy MooneyOffice ManagerLondon372008/12/11Low
Jackson BradshawDirectorNew York652008/09/26Medium
Olivia LiangSupport EngineerSingapore642011/02/03Low
Bruno NashSoftware EngineerLondon382011/05/03Low
Sakura YamamotoSupport EngineerTokyo372009/08/19Low
Thor WaltonDeveloperNew York612013/08/11Low
Finn CamachoSupport EngineerSan Francisco472009/07/07Low
Serge BaldwinData CoordinatorSingapore642012/04/09Low
Zenaida FrankSoftware EngineerNew York632010/01/04Low
Zorita SerranoSoftware EngineerSan Francisco562012/06/01Low
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01Low
Cara StevensSales AssistantNew York462011/12/06Low
Hermione ButlerRegional DirectorLondon472011/03/21Medium
Lael GreerSystems AdministratorLondon212009/02/27Low
Jonas AlexanderDeveloperSan Francisco302010/07/14Low
Shad DeckerRegional DirectorEdinburgh512008/11/13Low
Michael BruceJavascript DeveloperSingapore292011/06/27Low
Donna SniderCustomer SupportNew York272011/01/25Low
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $.fn.dataTable.ext.type.detect.unshift( function ( d ) { return d === 'Low' || d === 'Medium' || d === 'High' ? 'salary-grade' : @@ -570,366 +90,153 @@ $.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) { $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/plug-ins/sorting_manual.html b/examples/plug-ins/sorting_manual.html index 327eabbf..ebbc4c5c 100644 --- a/examples/plug-ins/sorting_manual.html +++ b/examples/plug-ins/sorting_manual.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Ordering plug-ins (no type detection) - - - - - - - - - + - - -
-
-

DataTables example Ordering plug-ins (no type detection)

-
-

Although DataTables will order a number of data types using the built in methods, When dealing with more complex formatted data, it can be desirable to define - the ordering order yourself. Using plug-in ordering functions, you have have DataTables order data in any manner you wish.

-

This is done by using the columns.type parameter, in combination with a ordering plug-in. The ordering plug-in can be be of any level of - complexity (natural ordering for example can be fairly complex while also very powerful), and is defined by attaching to the - $.fn.dataTable.ext.type.order object. For more information about ordering plug-ins; creating them and their requirements, please refer to the plug-in - development documentation.

-

This example shows ordering with using an enumerated type.

-

A wide variety of ready made ordering plug-ins can be found on the DataTables plug-ins page.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25Low
Garrett WintersAccountantTokyo632011/07/25Low
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12Low
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29Medium
Airi SatouAccountantTokyo332008/11/28Low
Brielle WilliamsonIntegration SpecialistNew York612012/12/02Medium
Herrod ChandlerSales AssistantSan Francisco592012/08/06Low
Rhona DavidsonIntegration SpecialistTokyo552010/10/14Low
Colleen HurstJavascript DeveloperSan Francisco392009/09/15Low
Sonya FrostSoftware EngineerEdinburgh232008/12/13Low
Jena GainesOffice ManagerLondon302008/12/19Low
Quinn FlynnSupport LeadEdinburgh222013/03/03Low
Charde MarshallRegional DirectorSan Francisco362008/10/16Medium
Haley KennedySenior Marketing DesignerLondon432012/12/18Low
Tatyana FitzpatrickRegional DirectorLondon192010/03/17Medium
Michael SilvaMarketing DesignerLondon662012/11/27Low
Paul ByrdChief Financial Officer (CFO)New York642010/06/09High
Gloria LittleSystems AdministratorNew York592009/04/10Low
Bradley GreerSoftware EngineerLondon412012/10/13Low
Dai RiosPersonnel LeadEdinburgh352012/09/26Low
Jenette CaldwellDevelopment LeadNew York302011/09/03Low
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25High
Caesar VancePre-Sales SupportNew York212011/12/12Low
Doris WilderSales AssistantSidney232010/09/20Low
Angelica RamosChief Executive Officer (CEO)London472009/10/09High
Gavin JoyceDeveloperEdinburgh422010/12/22Low
Jennifer ChangRegional DirectorSingapore282010/11/14Medium
Brenden WagnerSoftware EngineerSan Francisco282011/06/07Low
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11High
Shou ItouRegional MarketingTokyo202011/08/14Low
Michelle HouseIntegration SpecialistSidney372011/06/02Low
Suki BurksDeveloperLondon532009/10/22Low
Prescott BartlettTechnical AuthorLondon272011/05/07Low
Gavin CortezTeam LeaderSan Francisco222008/10/26Low
Martena MccrayPost-Sales supportEdinburgh462011/03/09Low
Unity ButlerMarketing DesignerSan Francisco472009/12/09Low
Howard HatfieldOffice ManagerSan Francisco512008/12/16Low
Hope FuentesSecretarySan Francisco412010/02/12Low
Vivian HarrellFinancial ControllerSan Francisco622009/02/14Medium
Timothy MooneyOffice ManagerLondon372008/12/11Low
Jackson BradshawDirectorNew York652008/09/26Medium
Olivia LiangSupport EngineerSingapore642011/02/03Low
Bruno NashSoftware EngineerLondon382011/05/03Low
Sakura YamamotoSupport EngineerTokyo372009/08/19Low
Thor WaltonDeveloperNew York612013/08/11Low
Finn CamachoSupport EngineerSan Francisco472009/07/07Low
Serge BaldwinData CoordinatorSingapore642012/04/09Low
Zenaida FrankSoftware EngineerNew York632010/01/04Low
Zorita SerranoSoftware EngineerSan Francisco562012/06/01Low
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01Low
Cara StevensSales AssistantNew York462011/12/06Low
Hermione ButlerRegional DirectorLondon472011/03/21Medium
Lael GreerSystems AdministratorLondon212009/02/27Low
Jonas AlexanderDeveloperSan Francisco302010/07/14Low
Shad DeckerRegional DirectorEdinburgh512008/11/13Low
Michael BruceJavascript DeveloperSingapore292011/06/27Low
Donna SniderCustomer SupportNew York272011/01/25Low
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) { + + + +
+
+

DataTables example Ordering plug-ins (no type detection)

+
+

Although DataTables will order a number of data types using the built in methods, When dealing with more complex formatted data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you have have DataTables order data in any manner you wish.

+ +

This is done by using the columns.type parameter, in combination with a ordering plug-in. The ordering plug-in can be be of any level of complexity (natural ordering for example can be fairly complex while also very powerful), and is defined by attaching to the $.fn.dataTable.ext.type.order object. For more information about ordering plug-ins; creating them and their requirements, please refer to the plug-in development documentation.

+ +

This example shows ordering with using an enumerated type.

+ +

A wide variety of ready made ordering plug-ins can be found on the DataTables plug-ins page.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25Low
Garrett WintersAccountantTokyo632011/07/25Low
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12Low
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29Medium
Airi SatouAccountantTokyo332008/11/28Low
Brielle WilliamsonIntegration SpecialistNew York612012/12/02Medium
Herrod ChandlerSales AssistantSan Francisco592012/08/06Low
Rhona DavidsonIntegration SpecialistTokyo552010/10/14Low
Colleen HurstJavascript DeveloperSan Francisco392009/09/15Low
Sonya FrostSoftware EngineerEdinburgh232008/12/13Low
Jena GainesOffice ManagerLondon302008/12/19Low
Quinn FlynnSupport LeadEdinburgh222013/03/03Low
Charde MarshallRegional DirectorSan Francisco362008/10/16Medium
Haley KennedySenior Marketing DesignerLondon432012/12/18Low
Tatyana FitzpatrickRegional DirectorLondon192010/03/17Medium
Michael SilvaMarketing DesignerLondon662012/11/27Low
Paul ByrdChief Financial Officer (CFO)New York642010/06/09High
Gloria LittleSystems AdministratorNew York592009/04/10Low
Bradley GreerSoftware EngineerLondon412012/10/13Low
Dai RiosPersonnel LeadEdinburgh352012/09/26Low
Jenette CaldwellDevelopment LeadNew York302011/09/03Low
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25High
Caesar VancePre-Sales SupportNew York212011/12/12Low
Doris WilderSales AssistantSidney232010/09/20Low
Angelica RamosChief Executive Officer (CEO)London472009/10/09High
Gavin JoyceDeveloperEdinburgh422010/12/22Low
Jennifer ChangRegional DirectorSingapore282010/11/14Medium
Brenden WagnerSoftware EngineerSan Francisco282011/06/07Low
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11High
Shou ItouRegional MarketingTokyo202011/08/14Low
Michelle HouseIntegration SpecialistSidney372011/06/02Low
Suki BurksDeveloperLondon532009/10/22Low
Prescott BartlettTechnical AuthorLondon272011/05/07Low
Gavin CortezTeam LeaderSan Francisco222008/10/26Low
Martena MccrayPost-Sales supportEdinburgh462011/03/09Low
Unity ButlerMarketing DesignerSan Francisco472009/12/09Low
Howard HatfieldOffice ManagerSan Francisco512008/12/16Low
Hope FuentesSecretarySan Francisco412010/02/12Low
Vivian HarrellFinancial ControllerSan Francisco622009/02/14Medium
Timothy MooneyOffice ManagerLondon372008/12/11Low
Jackson BradshawDirectorNew York652008/09/26Medium
Olivia LiangSupport EngineerSingapore642011/02/03Low
Bruno NashSoftware EngineerLondon382011/05/03Low
Sakura YamamotoSupport EngineerTokyo372009/08/19Low
Thor WaltonDeveloperNew York612013/08/11Low
Finn CamachoSupport EngineerSan Francisco472009/07/07Low
Serge BaldwinData CoordinatorSingapore642012/04/09Low
Zenaida FrankSoftware EngineerNew York632010/01/04Low
Zorita SerranoSoftware EngineerSan Francisco562012/06/01Low
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01Low
Cara StevensSales AssistantNew York462011/12/06Low
Hermione ButlerRegional DirectorLondon472011/03/21Medium
Lael GreerSystems AdministratorLondon212009/02/27Low
Jonas AlexanderDeveloperSan Francisco302010/07/14Low
Shad DeckerRegional DirectorEdinburgh512008/11/13Low
Michael BruceJavascript DeveloperSingapore292011/06/27Low
Donna SniderCustomer SupportNew York272011/01/25Low
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) { switch ( d ) { case 'Low': return 1; case 'Medium': return 2; @@ -564,366 +82,153 @@ $(document).ready(function() { } ] } ); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/resources/syntax/shCore.css b/examples/resources/syntax/shCore.css index 0788210e..37f7dc13 100644 --- a/examples/resources/syntax/shCore.css +++ b/examples/resources/syntax/shCore.css @@ -60,11 +60,6 @@ overflow: auto !important; font-size: 1em !important; clear: both; - - box-shadow: inset 0 0 3px #555; - padding: 5px 3px; - background: #f8f8f8 !important; - box-sizing: border-box; } .syntaxhighlighter.source { overflow: hidden !important; @@ -140,8 +135,8 @@ } .syntaxhighlighter .toolbar { position: absolute !important; - right: 10px !important; - top: 0 !important; + right: 1px !important; + top: -18px !important; font-size: 10px !important; z-index: 7 !important; } @@ -249,6 +244,7 @@ * Dual licensed under the MIT and GPL licenses. */ .syntaxhighlighter { + background-color: white !important; font-size: 13px !important; overflow: visible !important; } @@ -273,7 +269,7 @@ color: #5C5C5C !important; } .syntaxhighlighter .gutter .line.alt1, .syntaxhighlighter .gutter .line.alt2 { - background-color: transparent !important; + background-color: white !important; } .odd .syntaxhighlighter .gutter .line.alt1, .odd .syntaxhighlighter .gutter .line.alt2 { background-color: #F2F2F2 !important; diff --git a/examples/server_side/custom_vars.html b/examples/server_side/custom_vars.html index 28863bda..7cc43790 100644 --- a/examples/server_side/custom_vars.html +++ b/examples/server_side/custom_vars.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Custom HTTP variables - - - - - - - - - + - - -
-
-

DataTables example Custom HTTP variables

-
-

It can often be useful to send extra information to the server when utilising DataTables' server-side processing option. This is done by using the ajax.data option which can be used in one of - two different ways:

-
    -
  • object - An object data to send to the server. This is useful for adding static data to the request.
    • -
  • function - A function which will manipulate the data object to send to the server, adding values as required. Using the data - parameter as a function allows the additional data to evaluated and added to the request at the time the request is made.
    • + + + +
    +
    +

    DataTables example Custom HTTP variables

    +
    +

    It can often be useful to send extra information to the server when utilising DataTables' server-side processing option. This is done by using the ajax option's data parameter which can be used in one of two different ways:

    + +
      +
    • object - An object data to send to the server. This is useful for adding static data to the request.
      • +
    • function - A function which will manipulate the data object to send to the server, adding values as required. Using the data parameter as a function allows the additional data to evaluated and added to the request at the time the request is made.
      • +
    + +

    The example below shows server-side processing being used with an extra parameter being sent to the server by using the ajax.data option as a function.

    + +
    + + +
    First nameLast namePositionOfficeStart dateSalary
    First nameLast namePositionOfficeStart dateSalary
    + +
      +
    • Javascript
      • +
    • HTML
      • +
    • CSS
      • +
    • Ajax
      • +
    • Server-side script
    -

    The example below shows server-side processing being used with an extra parameter being sent to the server by using the ajax.data option as a - function.

    -
    - - - - - - - - - - - - - - - - - - - - - -
    First nameLast namePositionOfficeStart dateSalary
    First nameLast namePositionOfficeStart dateSalary
    -
      -
    • Javascript
      • -
    • HTML
      • -
    • CSS
      • -
    • Ajax
      • -
    • Server-side script
      • -
    -
    -
    -

    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, "serverSide": true, @@ -99,366 +75,153 @@ $(document).ready(function() { } } ); } ); -

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    - -
    -
    -

    The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

    -
    -
    -
    -

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

    + +

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    + +
    +
    +

    The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

    +
    +
    +
    +

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

    + +
    + +

    The following CSS library files are loaded for use in this example to provide the styling of the table:

    + +
    +
    +

    This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

    +
    +
    +

    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 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.

    -
    -
    -

    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.

    +
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/server_side/defer_loading.html b/examples/server_side/defer_loading.html index 148dc27f..4310b6d9 100644 --- a/examples/server_side/defer_loading.html +++ b/examples/server_side/defer_loading.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Deferred loading of data - - - - - - - - - + - - -
-
-

DataTables example Deferred loading of data

-
-

When using DataTables with server-side processing, the default behaviour is to have DataTables automatically make an Ajax call and load the data, removing - anything which might have already been in the table. However, this behaviour might not always be desirable when the first page of the table has already been - preloaded in the HTML (which you might do to ensure accessibility or for performance reasons).

-

This automatic Ajax call to get the first page of data can be overridden by using the deferLoading initialisation property. It serves two purposes, firstly to indicate that deferred - loading is required, but also to tell DataTables how many records there are in the full table, in this case 57 (this allows the information element and pagination - to be displayed correctly).

-

In the example below, the HTML page already has the first 10 rows of data available it in, so we use deferLoading to tell DataTables that this - data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
AiriSatouAccountantTokyo28th Nov 08$162,700
AngelicaRamosChief Executive Officer (CEO)London9th Oct 09$1,200,000
AshtonCoxJunior Technical AuthorSan Francisco12th Jan 09$86,000
BradleyGreerSoftware EngineerLondon13th Oct 12$132,000
BrendenWagnerSoftware EngineerSan Francisco7th Jun 11$206,850
BrielleWilliamsonIntegration SpecialistNew York2nd Dec 12$372,000
BrunoNashSoftware EngineerLondon3rd May 11$163,500
CaesarVancePre-Sales SupportNew York12th Dec 11$106,450
CaraStevensSales AssistantNew York6th Dec 11$145,600
CedricKellySenior Javascript DeveloperEdinburgh29th Mar 12$433,060
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Deferred loading of data

+
+

When using DataTables with server-side processing, the default behaviour is to have DataTables automatically make an Ajax call and load the data, removing anything which might have already been in the table. However, this behaviour might not always be desirable when the first page of the table has already been preloaded in the HTML (which you might do to ensure accessibility or for performance reasons).

+ +

This automatic Ajax call to get the first page of data can be overridden by using the deferLoading initialisation property. It serves two purposes, firstly to indicate that deferred loading is required, but also to tell DataTables how many records there are in the full table, in this case 57 (this allows the information element and pagination to be displayed correctly).

+ +

In the example below, the HTML page already has the first 10 rows of data available it in, so we use deferLoading to tell DataTables that this data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
AiriSatouAccountantTokyo28th Nov 08$162,700
AngelicaRamosChief Executive Officer (CEO)London9th Oct 09$1,200,000
AshtonCoxJunior Technical AuthorSan Francisco12th Jan 09$86,000
BradleyGreerSoftware EngineerLondon13th Oct 12$132,000
BrendenWagnerSoftware EngineerSan Francisco7th Jun 11$206,850
BrielleWilliamsonIntegration SpecialistNew York2nd Dec 12$372,000
BrunoNashSoftware EngineerLondon3rd May 11$163,500
CaesarVancePre-Sales SupportNew York12th Dec 11$106,450
CaraStevensSales AssistantNew York6th Dec 11$145,600
CedricKellySenior Javascript DeveloperEdinburgh29th Mar 12$433,060
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable( { "processing": true, "serverSide": true, @@ -167,366 +139,153 @@ $(document).ready(function() { "deferLoading": 57 } ); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/server_side/ids.html b/examples/server_side/ids.html index 6f729b84..f3edd38f 100644 --- a/examples/server_side/ids.html +++ b/examples/server_side/ids.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Automatic addition of row ID attributes - - - - - - - - - + - - -
-
-

DataTables example Automatic addition of row ID attributes

-
-

Often when using server-side processing you will find that it can be useful to have a specific ID on each row (the primary key value from the database for - example). By assigning the ID you want to apply to each row using the property DT_RowId of the data source object for each row (this property name can - be configured using the rowId option), - DataTables will automatically add it for you (note that this will work for Ajax and Javascript loaded data as well as for server-side processing).

-

In addition to DT_RowId there are other properties which perform similar actions - please refer to the server-side processing section of the manual for full details.

-

This example below shows DT_RowId being used to add information to the table. In addition objects are used as the data source for the rows.

-
- - - - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Automatic addition of row ID attributes

+
+

Often when using server-side processing you will find that it can be useful to have a specific ID on each row (the primary key value from the database for example). By assigning the ID you want to apply to each row using the property DT_RowId of the data source object for each row (this property name can be configured using the rowId option), DataTables will automatically add it for you (note that this will work for Ajax and Javascript loaded data as well as for server-side processing).

+ +

In addition to DT_RowId there are other properties which perform similar actions - please refer to the server-side processing section of the manual for full details.

+ +

This example below shows DT_RowId being used to add information to the table. In addition objects are used as the data source for the rows.

+ +
+ + +
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable( { "processing": true, "serverSide": true, @@ -98,366 +74,153 @@ $(document).ready(function() { ] } ); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/server_side/index.html b/examples/server_side/index.html index 42562a75..c4d49d36 100644 --- a/examples/server_side/index.html +++ b/examples/server_side/index.html @@ -1,85 +1,61 @@ - + - - - - - - - - - - DataTables examples - Server-side processing - - -
+ + + + + + + + DataTables examples - Server-side processing + + +
+
+

DataTables example Server-side processing

+
+

There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such, each draw of the table will result in a new Ajax request being made to get the required data.

+ +

Server-side processing is enabled by setting the serverSide option to true and providing an Ajax data source through the ajax option.

+ +

The examples in this section shows server-side processing in use and how it can be customised to suit your needs.

+ +
+
+
+
-

DataTables example Server-side processing

-
-

There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side - options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a - server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such, - each draw of the table will result in a new Ajax request being made to get the required data.

-

Server-side processing is enabled by setting the serverSide option to true and providing an Ajax data source through the ajax option.

-

The examples in this section shows server-side processing in use and how it can be customised to suit your needs.

-
-
-
-
-
-
-
-
-
-

Server-side

- +
+
+
+
+

Server-side

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
- +
+ \ No newline at end of file diff --git a/examples/server_side/jsonp.html b/examples/server_side/jsonp.html index f21f73e9..43b44bb1 100644 --- a/examples/server_side/jsonp.html +++ b/examples/server_side/jsonp.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - JSONP data source for remote domains - - - - - - - - - + - - -
-
-

DataTables example JSONP data source for remote domains

-
-

JSONP is one of several methods to allow the use of JSON data from any server - (browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load - server-side sourced data from any domain and is quite simply done with the dataType option of the ajax initialisation option.

-

When given as an object, the ajax - option maps directly onto the jQuery ajax options (i.e. any option that can be used in jQuery's Ajax function can - also be used in DataTable's ajax - option).

-

The example below shows ajax being - used with the dataType option set to retrieve JSONP data for server-side processing in DataTables.

-
- - - - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example JSONP data source for remote domains

+
+

JSONP is one of several methods to allow the use of JSON data from any server (browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load server-side sourced data from any domain and is quite simply done with the dataType option of the ajax initialisation option.

+ +

When given as an object, the ajax option maps directly onto the jQuery ajax options (i.e. any option that can be used in jQuery's Ajax function can also be used in DataTable's ajax option).

+ +

The example below shows ajax being used with the dataType option set to retrieve JSONP data for server-side processing in DataTables.

+ +
+ + +
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable( { "processing": true, "serverSide": true, @@ -91,366 +64,153 @@ $(document).ready(function() { } } ); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/server_side/object_data.html b/examples/server_side/object_data.html index 266dea4c..22aae6d1 100644 --- a/examples/server_side/object_data.html +++ b/examples/server_side/object_data.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Object data source - - - - - - - - - + - - -
-
-

DataTables example Object data source

-
-

The default data format that DataTables expects for server-side processing is a 2D array of data (rows by columns). However, this is often not flexible enough - for either the server-side environment, or you might want to convey more information in the data source than is necessary to show in the table (row IDs from the - database for example). For these situations DataTables supports the reading of data for objects as well as arrays.

-

In this example the server responds with an array of objects, where DataTables will look up and use each property that is specified by the columns.data property given for each - column.

-
- - - - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Object data source

+
+

The default data format that DataTables expects for server-side processing is a 2D array of data (rows by columns). However, this is often not flexible enough for either the server-side environment, or you might want to convey more information in the data source than is necessary to show in the table (row IDs from the database for example). For these situations DataTables supports the reading of data for objects as well as arrays.

+ +

In this example the server responds with an array of objects, where DataTables will look up and use each property that is specified by the columns.data property given for each column.

+ +
+ + +
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable( { "processing": true, "serverSide": true, @@ -97,366 +72,153 @@ $(document).ready(function() { ] } ); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/server_side/pipeline.html b/examples/server_side/pipeline.html index 35254a73..8029006d 100644 --- a/examples/server_side/pipeline.html +++ b/examples/server_side/pipeline.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Pipelining data to reduce Ajax calls for paging - - - - - - - - - + - - -
-
-

DataTables example Pipelining data to reduce Ajax calls for paging

-
-

Server-side processing can be quite hard on your server, since it makes an Ajax call to the server for every draw request that is made. On sites with a large - number of page views, you could potentially end up DDoSing your own server with your own applications!

-

This example shows one technique to reduce the number of Ajax calls that are made to the server by caching more data than is needed for each draw. This is done - by intercepting the Ajax call and routing it through a data cache control; using the data from the cache if available, and making the Ajax request if not. This - intercept of the Ajax request is performed by giving the ajax option as a function. This function then performs the logic of deciding if another Ajax call is needed, or if - data from the cache can be used.

-

Keep in mind that this caching is for paging only; the pipeline must be cleared for other interactions such as ordering and searching since the full data set, - when using server-side processing, is only available at the server.

-
- - - - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

// + + + +
+
+

DataTables example Pipelining data to reduce Ajax calls for paging

+
+

Server-side processing can be quite hard on your server, since it makes an Ajax call to the server for every draw request that is made. On sites with a large number of page views, you could potentially end up DDoSing your own server with your own applications!

+ +

This example shows one technique to reduce the number of Ajax calls that are made to the server by caching more data than is needed for each draw. This is done by intercepting the Ajax call and routing it through a data cache control; using the data from the cache if available, and making the Ajax request if not. This intercept of the Ajax request is performed by giving the ajax option as a function. This function then performs the logic of deciding if another Ajax call is needed, or if data from the cache can be used.

+ +

Keep in mind that this caching is for paging only; the pipeline must be cleared for other interactions such as ordering and searching since the full data set, when using server-side processing, is only available at the server.

+ +
+ + +
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ // // Pipelining function for DataTables. To be used to the `ajax` option of DataTables // $.fn.dataTable.pipeline = function ( opts ) { @@ -291,9 +263,7 @@ $.fn.dataTable.pipeline = function ( opts ) { if ( cacheLower != drawStart ) { json.data.splice( 0, drawStart-cacheLower ); } - if ( requestLength >= -1 ) { - json.data.splice( requestLength, json.data.length ); - } + json.data.splice( requestLength, json.data.length ); drawCallback( json ); } @@ -332,366 +302,153 @@ $(document).ready(function() { } ) } ); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/server_side/post.html b/examples/server_side/post.html index 4431e728..48b7a29e 100644 --- a/examples/server_side/post.html +++ b/examples/server_side/post.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - POST data - - - - - - - - - + - - -
-
-

DataTables example POST data

-
-

By default, the Ajax request that DataTables makes to obtain server-side processing data is an HTTP GET request. However, there are times when you might wish to - use POST. This is very easily done by using the type option of the ajax initialisation option.

-

When given as an object, the ajax - option maps directly onto the jQuery ajax options (i.e. any option that can be used in jQuery's Ajax function can - also be used in DataTable's ajax - option).

-

The example below shows ajax being - used with the type option set to POST to make a POST request.

-
- - - - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example POST data

+
+

By default, the Ajax request that DataTables makes to obtain server-side processing data is an HTTP GET request. However, there are times when you might wish to use POST. This is very easily done by using the type option of the ajax initialisation option.

+ +

When given as an object, the ajax option maps directly onto the jQuery ajax options (i.e. any option that can be used in jQuery's Ajax function can also be used in DataTable's ajax option).

+ +

The example below shows ajax being used with the type option set to POST to make a POST request.

+ +
+ + +
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable( { "processing": true, "serverSide": true, @@ -107,366 +81,153 @@ $(document).ready(function() { ] } ); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/server_side/row_details.html b/examples/server_side/row_details.html index 47150b3c..7905c98a 100644 --- a/examples/server_side/row_details.html +++ b/examples/server_side/row_details.html @@ -1,15 +1,15 @@ - + - - - - - DataTables example - Row details - - - - - - - - - + - - -
-
-

DataTables example Row details

-
-

This example shows the use of DataTables' ability to show and hide child rows which are attached to a parent row in the host table. This is often used to show - additional information about a row, particularly when you wish to convey more information about a row than there is space for in the host table.

-

The example below shows server-side processing being used with the first column having an event listener attached to it which will toggle the child row's - display. This is set up using columns.data and columns.defaultContent, in combination with CSS to show an empty cell with a background image which can be clicked - upon.

-

The event handler makes use of the row().child - methods to firstly check if a row is already displayed, and if so hide it, if not show it. The content of the child row is, in this example, defined by the - format() 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. Note that the format details function has access to the full data source object for the row, including - information that is not actually shown in the table (the salary parameter for example).

-

Furthermore, this example shows a small difference from the client-side row details example in that to have rows - automatically reopen when the table is redrawn, we need to track a unique identifier for each row - in this case the row id. This is required because - in server-side processing mode rows are automatically destroyed and recreated on each draw.

-
- - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOffice
First nameLast namePositionOffice
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

function format ( d ) { + + + +
+
+

DataTables example Row details

+
+

This example shows the use of DataTables' ability to show and hide child rows which are attached to a parent row in the host table. This is often used to show additional information about a row, particularly when you wish to convey more information about a row than there is space for in the host table.

+ +

The example below shows server-side processing being used with the first column having an event listener attached to it which will toggle the child row's display. This is set up using columns.data and columns.defaultContent, in combination with CSS to show an empty cell with a background image which can be clicked upon.

+ +

The event handler makes use of the row().child methods to firstly check if a row is already displayed, and if so hide it, if not show it. The content of the child row is, in this example, defined by the format() 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. Note that the format details function has access to the full data source object for the row, including information that is not actually shown in the table (the salary parameter for example).

+ +

Furthermore, this example shows a small difference from the client-side row details example in that to have rows automatically reopen when the table is redrawn, we need to track a unique identifier for each row - in this case the row id. This is required because in server-side processing mode rows are automatically destroyed and recreated on each draw.

+ +
+ + +
First nameLast namePositionOffice
First nameLast namePositionOffice
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ function format ( d ) { return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+ 'Salary: '+d.salary+'<br>'+ 'The child row can contain any data you wish, including links, images, inner tables etc.'; @@ -201,372 +173,159 @@ $(document).ready(function() { } ); } ); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

td.details-control { + +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ td.details-control { background: url('../resources/details_open.png') no-repeat center center; cursor: pointer; } tr.details td.details-control { background: url('../resources/details_close.png') no-repeat center center; } +
+ +

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.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/server_side/scripts/ssp.class.php b/examples/server_side/scripts/ssp.class.php index 530a388b..060d9d76 100644 --- a/examples/server_side/scripts/ssp.class.php +++ b/examples/server_side/scripts/ssp.class.php @@ -242,7 +242,7 @@ class SSP { // Main query to actually get the data $data = self::sql_exec( $db, $bindings, - "SELECT `".implode("`, `", self::pluck($columns, 'db'))."` + "SELECT SQL_CALC_FOUND_ROWS `".implode("`, `", self::pluck($columns, 'db'))."` FROM `$table` $where $order @@ -250,10 +250,8 @@ class SSP { ); // Data set length after filtering - $resFilterLength = self::sql_exec( $db, $bindings, - "SELECT COUNT(`{$primaryKey}`) - FROM `$table` - $where" + $resFilterLength = self::sql_exec( $db, + "SELECT FOUND_ROWS()" ); $recordsFiltered = $resFilterLength[0][0]; @@ -264,6 +262,7 @@ class SSP { ); $recordsTotal = $resTotalLength[0][0]; + /* * Output */ @@ -333,7 +332,7 @@ class SSP { // Main query to actually get the data $data = self::sql_exec( $db, $bindings, - "SELECT `".implode("`, `", self::pluck($columns, 'db'))."` + "SELECT SQL_CALC_FOUND_ROWS `".implode("`, `", self::pluck($columns, 'db'))."` FROM `$table` $where $order @@ -341,10 +340,8 @@ class SSP { ); // Data set length after filtering - $resFilterLength = self::sql_exec( $db, $bindings, - "SELECT COUNT(`{$primaryKey}`) - FROM `$table` - $where" + $resFilterLength = self::sql_exec( $db, + "SELECT FOUND_ROWS()" ); $recordsFiltered = $resFilterLength[0][0]; diff --git a/examples/server_side/select_rows.html b/examples/server_side/select_rows.html index 98c2e4cc..3d2b7c70 100644 --- a/examples/server_side/select_rows.html +++ b/examples/server_side/select_rows.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Row selection - - - - - - - - - + - - -
-
-

DataTables example Row selection

-
-

When you want to have user selectable rows in DataTables, it is relatively trivial when using DOM based data - but when using server-side processing, DataTables - doesn't retain DOM row elements over pages / filtering etc. As such, you will need to keep a track of which rows a user as selected and mark them as selected on - each draw.

-

This is shown in this demo, which uses a unique ID assigned to the TR element (this is done automatically through the use of the DT_RowId special - property returned as part of the object given by the server for each row) to track which rows are selected and reselect them is appropriate on a draw.

-

If you are looking for a more complete and easier to use row selection option, check out the Select extension - provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.

-
- - - - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Row selection

+
+

When you want to have user selectable rows in DataTables, it is relatively trivial when using DOM based data - but when using server-side processing, DataTables doesn't retain DOM row elements over pages / filtering etc. As such, you will need to keep a track of which rows a user as selected and mark them as selected on each draw.

+ +

This is shown in this demo, which uses a unique ID assigned to the TR element (this is done automatically through the use of the DT_RowId special property returned as part of the object given by the server for each row) to track which rows are selected and reselect them is appropriate on a draw.

+ +

If you are looking for a more complete and easier to use row selection option, check out the Select extension provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.

+ +
+ + +
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { var selected = []; $("#example").DataTable({ @@ -124,366 +100,153 @@ $(document).ready(function() { $(this).toggleClass('selected'); } ); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/server_side/simple.html b/examples/server_side/simple.html index 8c6edf88..707c1ec1 100644 --- a/examples/server_side/simple.html +++ b/examples/server_side/simple.html @@ -1,26 +1,19 @@ - + - - - - - DataTables example - Server-side processing - - - - - - - - - + - - -
-
-

DataTables example Server-side processing

-
-

There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side - options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a - server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such, - each draw of the table will result in a new Ajax request being made to get the required data.

-

Server-side processing is enabled by setting the serverSide option to true and providing an Ajax data source through the ajax option.

-

This example shows a very simple table, matching the other client-side processing examples, but in this instance using server-side processing.

-
- - - - - - - - - - - - - - - - - - - - - -
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Server-side processing

+
+

There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such, each draw of the table will result in a new Ajax request being made to get the required data.

+ +

Server-side processing is enabled by setting the serverSide option to true and providing an Ajax data source through the ajax option.

+ +

This example shows a very simple table, matching the other client-side processing examples, but in this instance using server-side processing.

+ +
+ + +
First nameLast namePositionOfficeStart dateSalary
First nameLast namePositionOfficeStart dateSalary
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable( { "processing": true, "serverSide": true, "ajax": "scripts/server_processing.php" } ); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/bootstrap.html b/examples/styling/bootstrap.html index 890708f1..20c04e4e 100644 --- a/examples/styling/bootstrap.html +++ b/examples/styling/bootstrap.html @@ -1,905 +1,202 @@ - + - - - - - DataTables example - Bootstrap 3 - - - - - - - - - - - + - - -
-
-

DataTables example Bootstrap 3

-
-

DataTables can integrate seamlessly with Bootstrap 3 using Bootstrap's table styling options to present an interface with a uniform design, based on Bootstrap, for your site / app.

-

DataTables' Bootstrap integration also provides a renderer for the pagination control in DataTables to ensure that the pagination of the table is also styled - consistently by Bootstrap.

-

This integration is done simply by including the DataTables Bootstrap files (CSS and JS) which will set the defaults needed for DataTables to be initialised as - normal, as shown in this examples.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Bootstrap 3

+
+

DataTables can integrate seamlessly with Bootstrap 3 using Bootstrap's table styling options to present an interface with a uniform design, based on Bootstrap, for your site / app.

+ +

DataTables' Bootstrap integration also provides a renderer for the pagination control in DataTables to ensure that the pagination of the table is also styled consistently by Bootstrap.

+ +

This integration is done simply by including the DataTables Bootstrap files (CSS and JS) which will set the defaults needed for DataTables to be initialised as normal, as shown in this examples.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/bootstrap4.html b/examples/styling/bootstrap4.html index 8f7d61ea..442413d7 100644 --- a/examples/styling/bootstrap4.html +++ b/examples/styling/bootstrap4.html @@ -1,906 +1,202 @@ - + - - - - - DataTables example - Bootstrap 4 (Tech. preview) - - - - - - - - - - - + - - -
-
-

DataTables example Bootstrap 4 (Tech. preview)

-
-

As with Bootstrap 3, DataTables can also be integrated seamlessly with Bootstrap 4. At the time of writing this example Bootstrap 4 was at the alpha stage, so - things can, and probably still will change before DataTables integration with Bootstrap 4 is complete.

-

This integration is done simply by including the DataTables Bootstrap 4 files (CSS and JS) which will set the defaults needed for DataTables to be initialised - as normal, as shown in this examples.

-

These integration libraries are not currently available in the DataTables download builder, but will become so when Bootstrap 4 is released. Until then they - need to be included from source.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Bootstrap 4 (Tech. preview)

+
+

As with Bootstrap 3, DataTables can also be integrated seamlessly with Bootstrap 4. At the time of writing this example Bootstrap 4 was at the alpha stage, so things can, and probably still will change before DataTables integration with Bootstrap 4 is complete.

+ +

This integration is done simply by including the DataTables Bootstrap 4 files (CSS and JS) which will set the defaults needed for DataTables to be initialised as normal, as shown in this examples.

+ +

These integration libraries are not currently available in the DataTables download builder, but will become so when Bootstrap 4 is released. Until then they need to be included from source.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/cell-border.html b/examples/styling/cell-border.html index d81f1970..1862c633 100644 --- a/examples/styling/cell-border.html +++ b/examples/styling/cell-border.html @@ -1,891 +1,198 @@ - + - - - - - DataTables example - Base style - cell borders - - - - - - - - - + - - -
-
-

DataTables example Base style - cell borders

-
-

This example shows DataTables with just the cell-border class specified, giving a strong delineation between individual cells.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Base style - cell borders

+
+

This example shows DataTables with just the cell-border class specified, giving a strong delineation between individual cells.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/compact.html b/examples/styling/compact.html index 4277d214..c52f7aef 100644 --- a/examples/styling/compact.html +++ b/examples/styling/compact.html @@ -1,892 +1,198 @@ - + - - - - - DataTables example - Base style - compact - - - - - - - - - + - - -
-
-

DataTables example Base style - compact

-
-

The compact class is used to reduce the amount of white-space the default styling for the DataTable uses, increasing the information density on - screen, as shown below.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Base style - compact

+
+

The compact class is used to reduce the amount of white-space the default styling for the DataTable uses, increasing the information density on screen, as shown below.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/display.html b/examples/styling/display.html index be7004f0..4b053ae9 100644 --- a/examples/styling/display.html +++ b/examples/styling/display.html @@ -1,903 +1,211 @@ - + - - - - - DataTables example - Base style - - - - - - - - - + - - -
-
-

DataTables example Base style

-
-

The DataTables default style file has a number of features which can be enabled based on the class name of the table. These features are:

-
    -
  • cell-border - Cells with a border
    • -
  • compact - Increase the data density by reducing the cell padding
    • -
  • hover - Highlight a row when hovered over
    • -
  • order-column - Highlight the cells in the column currently being ordering upon
    • -
  • row-border - Rows with a border
    • -
  • stripe - Zebra striped rows
    • + + + +
    +
    +

    DataTables example Base style

    +
    +

    The DataTables default style file has a number of features which can be enabled based on the class name of the table. These features are:

    + +
      +
    • cell-border - Cells with a border
      • +
    • compact - Increase the data density by reducing the cell padding
      • +
    • hover - Highlight a row when hovered over
      • +
    • order-column - Highlight the cells in the column currently being ordering upon
      • +
    • row-border - Rows with a border
      • +
    • stripe - Zebra striped rows
      • +
    + +

    These classes can be combined (simply assign multiple classes to the table) to build up the styling that you want for your table. For more information on the options in the DataTables stylesheet, please refer to the DataTables styling manual

    + +

    The display class is a short-cut for specifying the stripe hover order-column row-border as the class name for a table. This is shown in the example below.

    + +
    + + +
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
    Garrett WintersAccountantTokyo632011/07/25$170,750
    Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
    Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
    Airi SatouAccountantTokyo332008/11/28$162,700
    Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
    Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
    Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
    Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
    Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
    Jena GainesOffice ManagerLondon302008/12/19$90,560
    Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
    Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
    Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
    Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
    Michael SilvaMarketing DesignerLondon662012/11/27$198,500
    Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
    Gloria LittleSystems AdministratorNew York592009/04/10$237,500
    Bradley GreerSoftware EngineerLondon412012/10/13$132,000
    Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
    Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
    Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
    Caesar VancePre-Sales SupportNew York212011/12/12$106,450
    Doris WilderSales AssistantSidney232010/09/20$85,600
    Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
    Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
    Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
    Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
    Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
    Shou ItouRegional MarketingTokyo202011/08/14$163,000
    Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
    Suki BurksDeveloperLondon532009/10/22$114,500
    Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
    Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
    Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
    Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
    Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
    Hope FuentesSecretarySan Francisco412010/02/12$109,850
    Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
    Timothy MooneyOffice ManagerLondon372008/12/11$136,200
    Jackson BradshawDirectorNew York652008/09/26$645,750
    Olivia LiangSupport EngineerSingapore642011/02/03$234,500
    Bruno NashSoftware EngineerLondon382011/05/03$163,500
    Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
    Thor WaltonDeveloperNew York612013/08/11$98,540
    Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
    Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
    Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
    Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
    Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
    Cara StevensSales AssistantNew York462011/12/06$145,600
    Hermione ButlerRegional DirectorLondon472011/03/21$356,250
    Lael GreerSystems AdministratorLondon212009/02/27$103,500
    Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
    Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
    Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
    Donna SniderCustomer SupportNew York272011/01/25$112,000
    + +
      +
    • Javascript
      • +
    • HTML
      • +
    • CSS
      • +
    • Ajax
      • +
    • Server-side script
    -

    These classes can be combined (simply assign multiple classes to the table) to build up the styling that you want for your table. For more information on the - options in the DataTables stylesheet, please refer to the DataTables styling manual

    -

    The display class is a short-cut for specifying the stripe hover order-column row-border as the class name for a table. This is shown - in the example below.

    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    NamePositionOfficeAgeStart dateSalary
    NamePositionOfficeAgeStart dateSalary
    Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
    Garrett WintersAccountantTokyo632011/07/25$170,750
    Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
    Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
    Airi SatouAccountantTokyo332008/11/28$162,700
    Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
    Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
    Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
    Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
    Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
    Jena GainesOffice ManagerLondon302008/12/19$90,560
    Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
    Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
    Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
    Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
    Michael SilvaMarketing DesignerLondon662012/11/27$198,500
    Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
    Gloria LittleSystems AdministratorNew York592009/04/10$237,500
    Bradley GreerSoftware EngineerLondon412012/10/13$132,000
    Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
    Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
    Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
    Caesar VancePre-Sales SupportNew York212011/12/12$106,450
    Doris WilderSales AssistantSidney232010/09/20$85,600
    Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
    Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
    Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
    Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
    Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
    Shou ItouRegional MarketingTokyo202011/08/14$163,000
    Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
    Suki BurksDeveloperLondon532009/10/22$114,500
    Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
    Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
    Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
    Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
    Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
    Hope FuentesSecretarySan Francisco412010/02/12$109,850
    Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
    Timothy MooneyOffice ManagerLondon372008/12/11$136,200
    Jackson BradshawDirectorNew York652008/09/26$645,750
    Olivia LiangSupport EngineerSingapore642011/02/03$234,500
    Bruno NashSoftware EngineerLondon382011/05/03$163,500
    Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
    Thor WaltonDeveloperNew York612013/08/11$98,540
    Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
    Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
    Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
    Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
    Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
    Cara StevensSales AssistantNew York462011/12/06$145,600
    Hermione ButlerRegional DirectorLondon472011/03/21$356,250
    Lael GreerSystems AdministratorLondon212009/02/27$103,500
    Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
    Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
    Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
    Donna SniderCustomer SupportNew York272011/01/25$112,000
    -
      -
    • Javascript
      • -
    • HTML
      • -
    • CSS
      • -
    • Ajax
      • -
    • Server-side script
      • -
    -
    -
    -

    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:

    - -
    -
    -

    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:

    + +

    In addition to the above code, the following Javascript library files are loaded for use in this example:

    + +
    +
    +

    The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

    +
    +
    +
    +

    This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

    + +
    + +

    The following CSS library files are loaded for use in this example to provide the styling of the table:

    + +
    +
    +

    This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

    +
    +
    +

    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 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.

    -
    -
    -

    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.

    +
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/foundation.html b/examples/styling/foundation.html index 20d3012a..2b436afe 100644 --- a/examples/styling/foundation.html +++ b/examples/styling/foundation.html @@ -1,906 +1,202 @@ - + - - - - - DataTables example - Foundation - - - - - - - - - - - + - - -
-
-

DataTables example Foundation

-
-

DataTables can integrate seamlessly with Foundation using Foundations's table styling options to present a consistent interface with your Foundation driven site / app.

-

DataTables' Foundation integration also provides a renderer for the pagination control in DataTables to ensure that the pagination of the table is also styled - consistently by Foundation.

-

This integration is done simply by including the DataTables Foundation files (CSS and JS) which will set the defaults needed for DataTables to be initialised as - normal, as shown in this examples.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Foundation

+
+

DataTables can integrate seamlessly with Foundation using Foundations's table styling options to present a consistent interface with your Foundation driven site / app.

+ +

DataTables' Foundation integration also provides a renderer for the pagination control in DataTables to ensure that the pagination of the table is also styled consistently by Foundation.

+ +

This integration is done simply by including the DataTables Foundation files (CSS and JS) which will set the defaults needed for DataTables to be initialised as normal, as shown in this examples.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/hover.html b/examples/styling/hover.html index 925e9646..4750e5f2 100644 --- a/examples/styling/hover.html +++ b/examples/styling/hover.html @@ -1,892 +1,198 @@ - + - - - - - DataTables example - Base style - hover - - - - - - - - - + - - -
-
-

DataTables example Base style - hover

-
-

This example shows DataTables with just the hover class specified. This class will instruct DataTables' styling to highlight a row when the mouse - is hovered over it.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Base style - hover

+
+

This example shows DataTables with just the hover class specified. This class will instruct DataTables' styling to highlight a row when the mouse is hovered over it.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/index.html b/examples/styling/index.html index b8509d27..552d3941 100644 --- a/examples/styling/index.html +++ b/examples/styling/index.html @@ -1,97 +1,64 @@ - + - - - - - - - - - - DataTables examples - Styling - - -
+ + + + + + + + DataTables examples - Styling + + +
+
+

DataTables example Styling

+
+

When using DataTables, you want your tables to fit in with your site / app to make the end user experience as seamless as possible. For this reason, DataTables provides an easy to customise core stylesheet, which has a number of features that you can enable or disable as you required. Additionally there are a number of integration packages which can be used to fit DataTables into a site which uses some of the popular CSS libraries such as Twitter Bootstrap and Foundation. Or of course you can craft your own CSS to fit it into your site perfectly!

+ +

This section includes examples of how DataTables can be styled using these methods.

+ +
+
+
+
-

DataTables example Styling

-
-

When using DataTables, you want your tables to fit in with your site / app to make the end user experience as seamless as possible. For this reason, DataTables - provides an easy to customise core stylesheet, which has a number of features that you can enable or disable as you required. Additionally there are a number of - integration packages which can be used to fit DataTables into a site which uses some of the popular CSS libraries such as Twitter Bootstrap and Foundation. Or of - course you can craft your own CSS to fit it into your site perfectly!

-

This section includes examples of how DataTables can be styled using these methods.

-
-
-
-
-
-
-
-
-
-

Styling

- +
+
+
+
+

Styling

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
- +
+ \ No newline at end of file diff --git a/examples/styling/jqueryUI.html b/examples/styling/jqueryUI.html index 42ffc013..6840a647 100644 --- a/examples/styling/jqueryUI.html +++ b/examples/styling/jqueryUI.html @@ -1,908 +1,202 @@ - + - - - - - DataTables example - jQuery UI ThemeRoller - - - - - - - - - - - + - - -
-
-

DataTables example jQuery UI ThemeRoller

-
-

DataTables has the ability to integrate seamlessly with almost any styling library, and integration files are provided for several of the popular styling - libraries, including jQuery UI.

-

To have your table styles integrate with jQuery UI's ThemeRoller styles, simply include the DataTables CSS and JS integration files for jQuery UI, as shown in - this example. Note also that because jQuery doesn't provide table styles like some other CSS frameworks, the CSS integration file does add this styling - information.

-

Please note that DataTables 1.10- actually has built-in support for jQuery UI styling integration through the jQueryUI option. However, this option is - deprecated in DataTables 1.10 and will be removed DataTables 1.11, matching how styling integration is provided for other libraries - a more modular, maintainable - and extensible method. The method presented on this page is the method that will be use in future.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example jQuery UI ThemeRoller

+
+

DataTables has the ability to integrate seamlessly with almost any styling library, and integration files are provided for several of the popular styling libraries, including jQuery UI.

+ +

To have your table styles integrate with jQuery UI's ThemeRoller styles, simply include the DataTables CSS and JS integration files for jQuery UI, as shown in this example. Note also that because jQuery doesn't provide table styles like some other CSS frameworks, the CSS integration file does add this styling information.

+ +

Please note that DataTables 1.10- actually has built-in support for jQuery UI styling integration through the jQueryUI option. However, this option is deprecated in DataTables 1.10 and will be removed DataTables 1.11, matching how styling integration is provided for other libraries - a more modular, maintainable and extensible method. The method presented on this page is the method that will be use in future.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/material.html b/examples/styling/material.html index dca3c544..100e506e 100644 --- a/examples/styling/material.html +++ b/examples/styling/material.html @@ -1,29 +1,19 @@ - + - - - - - DataTables example - Material Design (Tech. preview) - - - - - - - - - - - + - - -
-
-

DataTables example Material Design (Tech. preview)

-
-

This example shows DataTables styled for Google's Material Design. The Material Design Lite libraries are used to provide the styling implementation for Material.

-

This is a technical preview example and the Material Design integration for DataTables is not yet complete. This tech preview is provided to gauge the interest - in a Material integration for DataTables and also to estimate the work that would be involved in fully supporting the styling library. As such, the Material design - implementation for DataTables can currently only be installed from source and is not available in package managers or the DataTables downloader.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Material Design (Tech. preview)

+
+

This example shows DataTables styled for Google's Material Design. The Material Design Lite libraries are used to provide the styling implementation for Material.

+ +

This is a technical preview example and the Material Design integration for DataTables is not yet complete. This tech preview is provided to gauge the interest in a Material integration for DataTables and also to estimate the work that would be involved in fully supporting the styling library. As such, the Material design implementation for DataTables can currently only be installed from source and is not available in package managers or the DataTables downloader.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable( { columnDefs: [ { @@ -547,373 +62,153 @@ $(document).ready(function() { ] } ); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/no-classes.html b/examples/styling/no-classes.html index 3f7ef712..4a8e5867 100644 --- a/examples/styling/no-classes.html +++ b/examples/styling/no-classes.html @@ -1,891 +1,198 @@ - + - - - - - DataTables example - Base style - no styling classes - - - - - - - - - + - - -
-
-

DataTables example Base style - no styling classes

-
-

This example shows the base DataTables style file being used, with none of the additional feature style classes being used.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Base style - no styling classes

+
+

This example shows the base DataTables style file being used, with none of the additional feature style classes being used.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/order-column.html b/examples/styling/order-column.html index 5b52f67c..b9a6df8d 100644 --- a/examples/styling/order-column.html +++ b/examples/styling/order-column.html @@ -1,892 +1,198 @@ - + - - - - - DataTables example - Base style - order-column - - - - - - - - - + - - -
-
-

DataTables example Base style - order-column

-
-

This example shows DataTables with just the order-column class specified. Typically you would want to use the stripe feature class in - addition to order-column (possibly hover as well), but this example shows just the ordered column highlighting.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Base style - order-column

+
+

This example shows DataTables with just the order-column class specified. Typically you would want to use the stripe feature class in addition to order-column (possibly hover as well), but this example shows just the ordered column highlighting.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/row-border.html b/examples/styling/row-border.html index 70f53325..1c605165 100644 --- a/examples/styling/row-border.html +++ b/examples/styling/row-border.html @@ -1,891 +1,198 @@ - + - - - - - DataTables example - Base style - row borders - - - - - - - - - + - - -
-
-

DataTables example Base style - row borders

-
-

This example shows DataTables with just the row-border class specified, which can create a pleasing, minimalist, interface for your tables.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Base style - row borders

+
+

This example shows DataTables with just the row-border class specified, which can create a pleasing, minimalist, interface for your tables.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/semanticui.html b/examples/styling/semanticui.html index fd00afc5..3c0a4924 100644 --- a/examples/styling/semanticui.html +++ b/examples/styling/semanticui.html @@ -1,908 +1,200 @@ - + - - - - - DataTables example - Semantic UI (Tech. preview) - - - - - - - - - - - - + - - -
-
-

DataTables example Semantic UI (Tech. preview)

-
-

This example shows DataTables integrated with Semantic UI. Semantic UI is a comprehensive framework that uses CSS class - names like words to create natural language styling library.

-

The DataTables integration with Semantic UI is still in development and not all elements might work correctly yet. Only once all of DataTables extensions fully - support Semantic UI will the integration be complete and available via the DataTables download builder.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Semantic UI (Tech. preview)

+
+

This example shows DataTables integrated with Semantic UI. Semantic UI is a comprehensive framework that uses CSS class names like words to create natural language styling library.

+ +

The DataTables integration with Semantic UI is still in development and not all elements might work correctly yet. Only once all of DataTables extensions fully support Semantic UI will the integration be complete and available via the DataTables download builder.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/stripe.html b/examples/styling/stripe.html index 8417b5ed..3ef7b55b 100644 --- a/examples/styling/stripe.html +++ b/examples/styling/stripe.html @@ -1,891 +1,198 @@ - + - - - - - DataTables example - Base style - stripe - - - - - - - - - + - - -
-
-

DataTables example Base style - stripe

-
-

This example shows DataTables with just the stripe class specified.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example Base style - stripe

+
+

This example shows DataTables with just the stripe class specified.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/examples/styling/uikit.html b/examples/styling/uikit.html index 628170d1..44570181 100644 --- a/examples/styling/uikit.html +++ b/examples/styling/uikit.html @@ -1,902 +1,200 @@ - + - - - - - DataTables example - UIKit (Tech. preview) - - - - - - - - - - - + - - -
-
-

DataTables example UIKit (Tech. preview)

-
-

This example shows DataTables integrated with UIKit.

-

The DataTables integration with UIKit is still in development and not all elements might work correctly yet. Only once all of DataTables extensions fully - support UIKit will the integration be complete and available via the DataTables download builder.

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
-
    -
  • Javascript
    • -
  • HTML
    • -
  • CSS
    • -
  • Ajax
    • -
  • Server-side script
    • -
-
-
-

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() { + + + +
+
+

DataTables example UIKit (Tech. preview)

+
+

This example shows DataTables integrated with UIKit.

+ +

The DataTables integration with UIKit is still in development and not all elements might work correctly yet. Only once all of DataTables extensions fully support UIKit will the integration be complete and available via the DataTables download builder.

+ +
+ + +
NamePositionOfficeAgeStart dateSalary
NamePositionOfficeAgeStart dateSalary
Tiger NixonSystem ArchitectEdinburgh612011/04/25$320,800
Garrett WintersAccountantTokyo632011/07/25$170,750
Ashton CoxJunior Technical AuthorSan Francisco662009/01/12$86,000
Cedric KellySenior Javascript DeveloperEdinburgh222012/03/29$433,060
Airi SatouAccountantTokyo332008/11/28$162,700
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$372,000
Herrod ChandlerSales AssistantSan Francisco592012/08/06$137,500
Rhona DavidsonIntegration SpecialistTokyo552010/10/14$327,900
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$205,500
Sonya FrostSoftware EngineerEdinburgh232008/12/13$103,600
Jena GainesOffice ManagerLondon302008/12/19$90,560
Quinn FlynnSupport LeadEdinburgh222013/03/03$342,000
Charde MarshallRegional DirectorSan Francisco362008/10/16$470,600
Haley KennedySenior Marketing DesignerLondon432012/12/18$313,500
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$385,750
Michael SilvaMarketing DesignerLondon662012/11/27$198,500
Paul ByrdChief Financial Officer (CFO)New York642010/06/09$725,000
Gloria LittleSystems AdministratorNew York592009/04/10$237,500
Bradley GreerSoftware EngineerLondon412012/10/13$132,000
Dai RiosPersonnel LeadEdinburgh352012/09/26$217,500
Jenette CaldwellDevelopment LeadNew York302011/09/03$345,000
Yuri BerryChief Marketing Officer (CMO)New York402009/06/25$675,000
Caesar VancePre-Sales SupportNew York212011/12/12$106,450
Doris WilderSales AssistantSidney232010/09/20$85,600
Angelica RamosChief Executive Officer (CEO)London472009/10/09$1,200,000
Gavin JoyceDeveloperEdinburgh422010/12/22$92,575
Jennifer ChangRegional DirectorSingapore282010/11/14$357,650
Brenden WagnerSoftware EngineerSan Francisco282011/06/07$206,850
Fiona GreenChief Operating Officer (COO)San Francisco482010/03/11$850,000
Shou ItouRegional MarketingTokyo202011/08/14$163,000
Michelle HouseIntegration SpecialistSidney372011/06/02$95,400
Suki BurksDeveloperLondon532009/10/22$114,500
Prescott BartlettTechnical AuthorLondon272011/05/07$145,000
Gavin CortezTeam LeaderSan Francisco222008/10/26$235,500
Martena MccrayPost-Sales supportEdinburgh462011/03/09$324,050
Unity ButlerMarketing DesignerSan Francisco472009/12/09$85,675
Howard HatfieldOffice ManagerSan Francisco512008/12/16$164,500
Hope FuentesSecretarySan Francisco412010/02/12$109,850
Vivian HarrellFinancial ControllerSan Francisco622009/02/14$452,500
Timothy MooneyOffice ManagerLondon372008/12/11$136,200
Jackson BradshawDirectorNew York652008/09/26$645,750
Olivia LiangSupport EngineerSingapore642011/02/03$234,500
Bruno NashSoftware EngineerLondon382011/05/03$163,500
Sakura YamamotoSupport EngineerTokyo372009/08/19$139,575
Thor WaltonDeveloperNew York612013/08/11$98,540
Finn CamachoSupport EngineerSan Francisco472009/07/07$87,500
Serge BaldwinData CoordinatorSingapore642012/04/09$138,575
Zenaida FrankSoftware EngineerNew York632010/01/04$125,250
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$115,000
Jennifer AcostaJunior Javascript DeveloperEdinburgh432013/02/01$75,650
Cara StevensSales AssistantNew York462011/12/06$145,600
Hermione ButlerRegional DirectorLondon472011/03/21$356,250
Lael GreerSystems AdministratorLondon212009/02/27$103,500
Jonas AlexanderDeveloperSan Francisco302010/07/14$86,500
Shad DeckerRegional DirectorEdinburgh512008/11/13$183,000
Michael BruceJavascript DeveloperSingapore292011/06/27$183,000
Donna SniderCustomer SupportNew York272011/01/25$112,000
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
  • Server-side script
    • +
+ +
+
+

The Javascript shown below is used to initialise the table shown in this example:

+ $(document).ready(function() { $('#example').DataTable(); } ); -

In addition to the above code, the following Javascript library files are loaded for use in this example:

- -
-
-

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

-
-
-
-

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The - additional CSS used is shown below:

+ +

In addition to the above code, the following Javascript library files are loaded for use in this example:

+ +
+
+

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

+
+
+
+

This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The additional CSS used is shown below:

+ +
+ +

The following CSS library files are loaded for use in this example to provide the styling of the table:

+ +
+
+

This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is loaded.

+
+
+

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 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.

-
-
-

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.

+
+ + +
+ +
+
+
+
+

Other examples

+
+

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

+
+ +
+

+ Please refer to the DataTables documentation for full information about its API properties and methods.
+ Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables. +

+ +

+ DataTables designed and created by SpryMedia Ltd © 2007-2016
+ DataTables is licensed under the MIT license. +

+
-
-
-
-
-
-

Other examples

-
-
-

Basic initialisation

- -
-
-

Advanced initialisation

- -
-
-

Styling

- -
-
-

Data sources

- -
-
-

API

- -
-
-

Ajax

- -
-
-

Server-side

- -
-
-

Plug-ins

- -
-
-
-

Please refer to the DataTables documentation for full information about its API properties and methods.
- Additionally, there are a wide range of extensions and plug-ins which extend the capabilities of DataTables.

-

DataTables designed and created by SpryMedia Ltd © 2007-2016
- DataTables is licensed under the MIT license.

-
-
-
-
- + \ No newline at end of file diff --git a/media/css/dataTables.bootstrap.css b/media/css/dataTables.bootstrap.css index 60bef77e..db2c148e 100644 --- a/media/css/dataTables.bootstrap.css +++ b/media/css/dataTables.bootstrap.css @@ -3,12 +3,10 @@ table.dataTable { margin-top: 6px !important; margin-bottom: 6px !important; max-width: none !important; - border-collapse: separate !important; } table.dataTable td, table.dataTable th { -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; box-sizing: content-box; } table.dataTable td.dataTables_empty, @@ -156,6 +154,9 @@ table.dataTable.table-condensed .sorting_desc:after { right: 6px; } +table.table-bordered.dataTable { + border-collapse: separate !important; +} table.table-bordered.dataTable th, table.table-bordered.dataTable td { border-left-width: 0; diff --git a/media/css/dataTables.bootstrap.min.css b/media/css/dataTables.bootstrap.min.css index 16ed6375..05cf1f5c 100644 --- a/media/css/dataTables.bootstrap.min.css +++ b/media/css/dataTables.bootstrap.min.css @@ -1 +1 @@ -table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:8px;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:8px;right:8px;display:block;font-family:'Glyphicons Halflings';opacity:0.5}table.dataTable thead .sorting:after{opacity:0.2;content:"\e150"}table.dataTable thead .sorting_asc:after{content:"\e155"}table.dataTable thead .sorting_desc:after{content:"\e156"}table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{color:#eee}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0} +table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:8px;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:8px;right:8px;display:block;font-family:'Glyphicons Halflings';opacity:0.5}table.dataTable thead .sorting:after{opacity:0.2;content:"\e150"}table.dataTable thead .sorting_asc:after{content:"\e155"}table.dataTable thead .sorting_desc:after{content:"\e156"}table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{color:#eee}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable{border-collapse:separate !important}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0} diff --git a/media/css/dataTables.bootstrap4.css b/media/css/dataTables.bootstrap4.css index c2c4ffba..30bafc7f 100644 --- a/media/css/dataTables.bootstrap4.css +++ b/media/css/dataTables.bootstrap4.css @@ -3,11 +3,11 @@ table.dataTable { margin-top: 6px !important; margin-bottom: 6px !important; max-width: none !important; - border-collapse: separate !important; } table.dataTable td, table.dataTable th { -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; box-sizing: content-box; } table.dataTable td.dataTables_empty, @@ -164,6 +164,9 @@ table.dataTable.table-condensed .sorting_desc:after { right: 6px; } +table.table-bordered.dataTable { + border-collapse: separate !important; +} table.table-bordered.dataTable th, table.table-bordered.dataTable td { border-left-width: 0; diff --git a/media/css/dataTables.bootstrap4.min.css b/media/css/dataTables.bootstrap4.min.css index 881beb32..259df679 100644 --- a/media/css/dataTables.bootstrap4.min.css +++ b/media/css/dataTables.bootstrap4.min.css @@ -1 +1 @@ -table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important;border-collapse:separate !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:0.85em;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:0.9em;display:block;opacity:0.3}table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:before{right:1em;content:"\2191"}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{right:0.5em;content:"\2193"}table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{opacity:1}table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{opacity:0}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0} +table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:0.85em;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{cursor:pointer;position:relative}table.dataTable thead .sorting:before,table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{position:absolute;bottom:0.9em;display:block;opacity:0.3}table.dataTable thead .sorting:before,table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:before,table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:before{right:1em;content:"\2191"}table.dataTable thead .sorting:after,table.dataTable thead .sorting_asc:after,table.dataTable thead .sorting_desc:after,table.dataTable thead .sorting_asc_disabled:after,table.dataTable thead .sorting_desc_disabled:after{right:0.5em;content:"\2193"}table.dataTable thead .sorting_asc:before,table.dataTable thead .sorting_desc:after{opacity:1}table.dataTable thead .sorting_asc_disabled:before,table.dataTable thead .sorting_desc_disabled:after{opacity:0}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.table-condensed>thead>tr>th{padding-right:20px}table.dataTable.table-condensed .sorting:after,table.dataTable.table-condensed .sorting_asc:after,table.dataTable.table-condensed .sorting_desc:after{top:6px;right:6px}table.table-bordered.dataTable{border-collapse:separate !important}table.table-bordered.dataTable th,table.table-bordered.dataTable td{border-left-width:0}table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable th:last-child,table.table-bordered.dataTable td:last-child,table.table-bordered.dataTable td:last-child{border-right-width:0}table.table-bordered.dataTable tbody th,table.table-bordered.dataTable tbody td{border-bottom-width:0}div.dataTables_scrollHead table.table-bordered{border-bottom-width:0}div.table-responsive>div.dataTables_wrapper>div.row{margin:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:first-child{padding-left:0}div.table-responsive>div.dataTables_wrapper>div.row>div[class^="col-"]:last-child{padding-right:0} diff --git a/media/css/dataTables.foundation.css b/media/css/dataTables.foundation.css index 24f8d048..42e81364 100644 --- a/media/css/dataTables.foundation.css +++ b/media/css/dataTables.foundation.css @@ -7,6 +7,7 @@ table.dataTable { table.dataTable td, table.dataTable th { -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; box-sizing: content-box; } table.dataTable td.dataTables_empty, diff --git a/media/css/dataTables.foundation.min.css b/media/css/dataTables.foundation.min.css index 9aef3da6..b44d08d2 100644 --- a/media/css/dataTables.foundation.min.css +++ b/media/css/dataTables.foundation.min.css @@ -1 +1 @@ -table.dataTable{clear:both;margin:0.5em 0 !important;max-width:none !important;width:100%}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper{position:relative}div.dataTables_wrapper div.dataTables_length label{float:left;text-align:left;margin-bottom:0}div.dataTables_wrapper div.dataTables_length select{width:75px;margin-bottom:0}div.dataTables_wrapper div.dataTables_filter label{float:right;margin-bottom:0}div.dataTables_wrapper div.dataTables_filter input{display:inline-block !important;width:auto !important;margin-bottom:0;margin-left:0.5em}div.dataTables_wrapper div.dataTables_info{padding-top:2px}div.dataTables_wrapper div.dataTables_paginate{float:right;margin:0}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1rem 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:1.5rem}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc{cursor:pointer}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table.dataTable thead .sorting{background-image:url("../images/sort_both.png")}table.dataTable thead .sorting_asc{background-image:url("../images/sort_asc.png")}table.dataTable thead .sorting_desc{background-image:url("../images/sort_desc.png")}table.dataTable thead .sorting_asc_disabled{background-image:url("../images/sort_asc_disabled.png")}table.dataTable thead .sorting_desc_disabled{background-image:url("../images/sort_desc_disabled.png")}div.dataTables_scrollHead table{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none} +table.dataTable{clear:both;margin:0.5em 0 !important;max-width:none !important;width:100%}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper{position:relative}div.dataTables_wrapper div.dataTables_length label{float:left;text-align:left;margin-bottom:0}div.dataTables_wrapper div.dataTables_length select{width:75px;margin-bottom:0}div.dataTables_wrapper div.dataTables_filter label{float:right;margin-bottom:0}div.dataTables_wrapper div.dataTables_filter input{display:inline-block !important;width:auto !important;margin-bottom:0;margin-left:0.5em}div.dataTables_wrapper div.dataTables_info{padding-top:2px}div.dataTables_wrapper div.dataTables_paginate{float:right;margin:0}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1rem 0}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:1.5rem}table.dataTable thead>tr>th:active,table.dataTable thead>tr>td:active{outline:none}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc{cursor:pointer}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table.dataTable thead .sorting{background-image:url("../images/sort_both.png")}table.dataTable thead .sorting_asc{background-image:url("../images/sort_asc.png")}table.dataTable thead .sorting_desc{background-image:url("../images/sort_desc.png")}table.dataTable thead .sorting_asc_disabled{background-image:url("../images/sort_asc_disabled.png")}table.dataTable thead .sorting_desc_disabled{background-image:url("../images/sort_desc_disabled.png")}div.dataTables_scrollHead table{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none} diff --git a/media/css/dataTables.jqueryui.css b/media/css/dataTables.jqueryui.css index 3397b7cc..a3d04f02 100644 --- a/media/css/dataTables.jqueryui.css +++ b/media/css/dataTables.jqueryui.css @@ -234,6 +234,7 @@ table.dataTable, table.dataTable th, table.dataTable td { -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; box-sizing: content-box; } diff --git a/media/css/dataTables.jqueryui.min.css b/media/css/dataTables.jqueryui.min.css index a1ec199b..9e026e75 100644 --- a/media/css/dataTables.jqueryui.min.css +++ b/media/css/dataTables.jqueryui.min.css @@ -1 +1 @@ -table.dataTable{width:100%;margin:0 auto;clear:both;border-collapse:separate;border-spacing:0}table.dataTable thead th,table.dataTable tfoot th{font-weight:bold}table.dataTable thead th,table.dataTable thead td{padding:10px 18px}table.dataTable thead th:active,table.dataTable thead td:active{outline:none}table.dataTable tfoot th,table.dataTable tfoot td{padding:10px 18px 6px 18px}table.dataTable tbody tr{background-color:#ffffff}table.dataTable tbody tr.selected{background-color:#B0BED9}table.dataTable tbody th,table.dataTable tbody td{padding:8px 10px}table.dataTable.row-border tbody th,table.dataTable.row-border tbody td,table.dataTable.display tbody th,table.dataTable.display tbody td{border-top:1px solid #ddd}table.dataTable.row-border tbody tr:first-child th,table.dataTable.row-border tbody tr:first-child td,table.dataTable.display tbody tr:first-child th,table.dataTable.display tbody tr:first-child td{border-top:none}table.dataTable.cell-border tbody th,table.dataTable.cell-border tbody td{border-top:1px solid #ddd;border-right:1px solid #ddd}table.dataTable.cell-border tbody tr th:first-child,table.dataTable.cell-border tbody tr td:first-child{border-left:1px solid #ddd}table.dataTable.cell-border tbody tr:first-child th,table.dataTable.cell-border tbody tr:first-child td{border-top:none}table.dataTable.stripe tbody tr.odd,table.dataTable.display tbody tr.odd{background-color:#f9f9f9}table.dataTable.stripe tbody tr.odd.selected,table.dataTable.display tbody tr.odd.selected{background-color:#acbad4}table.dataTable.hover tbody tr:hover,table.dataTable.display tbody tr:hover{background-color:#f6f6f6}table.dataTable.hover tbody tr:hover.selected,table.dataTable.display tbody tr:hover.selected{background-color:#aab7d1}table.dataTable.order-column tbody tr>.sorting_1,table.dataTable.order-column tbody tr>.sorting_2,table.dataTable.order-column tbody tr>.sorting_3,table.dataTable.display tbody tr>.sorting_1,table.dataTable.display tbody tr>.sorting_2,table.dataTable.display tbody tr>.sorting_3{background-color:#fafafa}table.dataTable.order-column tbody tr.selected>.sorting_1,table.dataTable.order-column tbody tr.selected>.sorting_2,table.dataTable.order-column tbody tr.selected>.sorting_3,table.dataTable.display tbody tr.selected>.sorting_1,table.dataTable.display tbody tr.selected>.sorting_2,table.dataTable.display tbody tr.selected>.sorting_3{background-color:#acbad5}table.dataTable.display tbody tr.odd>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd>.sorting_1{background-color:#f1f1f1}table.dataTable.display tbody tr.odd>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd>.sorting_2{background-color:#f3f3f3}table.dataTable.display tbody tr.odd>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd>.sorting_3{background-color:whitesmoke}table.dataTable.display tbody tr.odd.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_1{background-color:#a6b4cd}table.dataTable.display tbody tr.odd.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_2{background-color:#a8b5cf}table.dataTable.display tbody tr.odd.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_3{background-color:#a9b7d1}table.dataTable.display tbody tr.even>.sorting_1,table.dataTable.order-column.stripe tbody tr.even>.sorting_1{background-color:#fafafa}table.dataTable.display tbody tr.even>.sorting_2,table.dataTable.order-column.stripe tbody tr.even>.sorting_2{background-color:#fcfcfc}table.dataTable.display tbody tr.even>.sorting_3,table.dataTable.order-column.stripe tbody tr.even>.sorting_3{background-color:#fefefe}table.dataTable.display tbody tr.even.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_1{background-color:#acbad5}table.dataTable.display tbody tr.even.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_2{background-color:#aebcd6}table.dataTable.display tbody tr.even.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_3{background-color:#afbdd8}table.dataTable.display tbody tr:hover>.sorting_1,table.dataTable.order-column.hover tbody tr:hover>.sorting_1{background-color:#eaeaea}table.dataTable.display tbody tr:hover>.sorting_2,table.dataTable.order-column.hover tbody tr:hover>.sorting_2{background-color:#ececec}table.dataTable.display tbody tr:hover>.sorting_3,table.dataTable.order-column.hover tbody tr:hover>.sorting_3{background-color:#efefef}table.dataTable.display tbody tr:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1{background-color:#a2aec7}table.dataTable.display tbody tr:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_2{background-color:#a3b0c9}table.dataTable.display tbody tr:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3{background-color:#a5b2cb}table.dataTable.no-footer{border-bottom:1px solid #111}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable.compact thead th,table.dataTable.compact thead td{padding:4px 17px 4px 4px}table.dataTable.compact tfoot th,table.dataTable.compact tfoot td{padding:4px}table.dataTable.compact tbody th,table.dataTable.compact tbody td{padding:4px}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center,table.dataTable td.dataTables_empty{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}table.dataTable,table.dataTable th,table.dataTable td{-webkit-box-sizing:content-box;box-sizing:content-box}.dataTables_wrapper{position:relative;clear:both;*zoom:1;zoom:1}.dataTables_wrapper .dataTables_length{float:left}.dataTables_wrapper .dataTables_filter{float:right;text-align:right}.dataTables_wrapper .dataTables_filter input{margin-left:0.5em}.dataTables_wrapper .dataTables_info{clear:both;float:left;padding-top:0.755em}.dataTables_wrapper .dataTables_paginate{float:right;text-align:right;padding-top:0.25em}.dataTables_wrapper .dataTables_paginate .paginate_button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:0.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;*cursor:hand;color:#333 !important;border:1px solid transparent;border-radius:2px}.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{color:#333 !important;border:1px solid #979797;background-color:white;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));background:-webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-o-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{cursor:default;color:#666 !important;border:1px solid transparent;background:transparent;box-shadow:none}.dataTables_wrapper .dataTables_paginate .paginate_button:hover{color:white !important;border:1px solid #111;background-color:#585858;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));background:-webkit-linear-gradient(top, #585858 0%, #111 100%);background:-moz-linear-gradient(top, #585858 0%, #111 100%);background:-ms-linear-gradient(top, #585858 0%, #111 100%);background:-o-linear-gradient(top, #585858 0%, #111 100%);background:linear-gradient(to bottom, #585858 0%, #111 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button:active{outline:none;background-color:#2b2b2b;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));background:-webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);box-shadow:inset 0 0 3px #111}.dataTables_wrapper .dataTables_paginate .ellipsis{padding:0 1em}.dataTables_wrapper .dataTables_processing{position:absolute;top:50%;left:50%;width:100%;height:40px;margin-left:-50%;margin-top:-25px;padding-top:20px;text-align:center;font-size:1.2em;background-color:white;background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%)}.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate{color:#333}.dataTables_wrapper .dataTables_scroll{clear:both}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody{*margin-top:-1px;-webkit-overflow-scrolling:touch}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td{vertical-align:middle}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td>div.dataTables_sizing{height:0;overflow:hidden;margin:0 !important;padding:0 !important}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:1px solid #111}.dataTables_wrapper.no-footer div.dataTables_scrollHead table,.dataTables_wrapper.no-footer div.dataTables_scrollBody table{border-bottom:none}.dataTables_wrapper:after{visibility:hidden;display:block;content:"";clear:both;height:0}@media screen and (max-width: 767px){.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{float:none;text-align:center}.dataTables_wrapper .dataTables_paginate{margin-top:0.5em}}@media screen and (max-width: 640px){.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{float:none;text-align:center}.dataTables_wrapper .dataTables_filter{margin-top:0.5em}}table.dataTable thead th div.DataTables_sort_wrapper{position:relative}table.dataTable thead th div.DataTables_sort_wrapper span{position:absolute;top:50%;margin-top:-8px;right:-18px}table.dataTable thead th.ui-state-default,table.dataTable tfoot th.ui-state-default{border-left-width:0}table.dataTable thead th.ui-state-default:first-child,table.dataTable tfoot th.ui-state-default:first-child{border-left-width:1px}.dataTables_wrapper .dataTables_paginate .fg-button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:0.5em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;*cursor:hand;border:1px solid transparent}.dataTables_wrapper .dataTables_paginate .fg-button:active{outline:none}.dataTables_wrapper .dataTables_paginate .fg-button:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}.dataTables_wrapper .dataTables_paginate .fg-button:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.dataTables_wrapper .ui-widget-header{font-weight:normal}.dataTables_wrapper .ui-toolbar{padding:8px}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:none}.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate{color:inherit} +table.dataTable{width:100%;margin:0 auto;clear:both;border-collapse:separate;border-spacing:0}table.dataTable thead th,table.dataTable tfoot th{font-weight:bold}table.dataTable thead th,table.dataTable thead td{padding:10px 18px}table.dataTable thead th:active,table.dataTable thead td:active{outline:none}table.dataTable tfoot th,table.dataTable tfoot td{padding:10px 18px 6px 18px}table.dataTable tbody tr{background-color:#ffffff}table.dataTable tbody tr.selected{background-color:#B0BED9}table.dataTable tbody th,table.dataTable tbody td{padding:8px 10px}table.dataTable.row-border tbody th,table.dataTable.row-border tbody td,table.dataTable.display tbody th,table.dataTable.display tbody td{border-top:1px solid #ddd}table.dataTable.row-border tbody tr:first-child th,table.dataTable.row-border tbody tr:first-child td,table.dataTable.display tbody tr:first-child th,table.dataTable.display tbody tr:first-child td{border-top:none}table.dataTable.cell-border tbody th,table.dataTable.cell-border tbody td{border-top:1px solid #ddd;border-right:1px solid #ddd}table.dataTable.cell-border tbody tr th:first-child,table.dataTable.cell-border tbody tr td:first-child{border-left:1px solid #ddd}table.dataTable.cell-border tbody tr:first-child th,table.dataTable.cell-border tbody tr:first-child td{border-top:none}table.dataTable.stripe tbody tr.odd,table.dataTable.display tbody tr.odd{background-color:#f9f9f9}table.dataTable.stripe tbody tr.odd.selected,table.dataTable.display tbody tr.odd.selected{background-color:#acbad4}table.dataTable.hover tbody tr:hover,table.dataTable.display tbody tr:hover{background-color:#f6f6f6}table.dataTable.hover tbody tr:hover.selected,table.dataTable.display tbody tr:hover.selected{background-color:#aab7d1}table.dataTable.order-column tbody tr>.sorting_1,table.dataTable.order-column tbody tr>.sorting_2,table.dataTable.order-column tbody tr>.sorting_3,table.dataTable.display tbody tr>.sorting_1,table.dataTable.display tbody tr>.sorting_2,table.dataTable.display tbody tr>.sorting_3{background-color:#fafafa}table.dataTable.order-column tbody tr.selected>.sorting_1,table.dataTable.order-column tbody tr.selected>.sorting_2,table.dataTable.order-column tbody tr.selected>.sorting_3,table.dataTable.display tbody tr.selected>.sorting_1,table.dataTable.display tbody tr.selected>.sorting_2,table.dataTable.display tbody tr.selected>.sorting_3{background-color:#acbad5}table.dataTable.display tbody tr.odd>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd>.sorting_1{background-color:#f1f1f1}table.dataTable.display tbody tr.odd>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd>.sorting_2{background-color:#f3f3f3}table.dataTable.display tbody tr.odd>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd>.sorting_3{background-color:whitesmoke}table.dataTable.display tbody tr.odd.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_1{background-color:#a6b4cd}table.dataTable.display tbody tr.odd.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_2{background-color:#a8b5cf}table.dataTable.display tbody tr.odd.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_3{background-color:#a9b7d1}table.dataTable.display tbody tr.even>.sorting_1,table.dataTable.order-column.stripe tbody tr.even>.sorting_1{background-color:#fafafa}table.dataTable.display tbody tr.even>.sorting_2,table.dataTable.order-column.stripe tbody tr.even>.sorting_2{background-color:#fcfcfc}table.dataTable.display tbody tr.even>.sorting_3,table.dataTable.order-column.stripe tbody tr.even>.sorting_3{background-color:#fefefe}table.dataTable.display tbody tr.even.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_1{background-color:#acbad5}table.dataTable.display tbody tr.even.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_2{background-color:#aebcd6}table.dataTable.display tbody tr.even.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_3{background-color:#afbdd8}table.dataTable.display tbody tr:hover>.sorting_1,table.dataTable.order-column.hover tbody tr:hover>.sorting_1{background-color:#eaeaea}table.dataTable.display tbody tr:hover>.sorting_2,table.dataTable.order-column.hover tbody tr:hover>.sorting_2{background-color:#ececec}table.dataTable.display tbody tr:hover>.sorting_3,table.dataTable.order-column.hover tbody tr:hover>.sorting_3{background-color:#efefef}table.dataTable.display tbody tr:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1{background-color:#a2aec7}table.dataTable.display tbody tr:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_2{background-color:#a3b0c9}table.dataTable.display tbody tr:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3{background-color:#a5b2cb}table.dataTable.no-footer{border-bottom:1px solid #111}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable.compact thead th,table.dataTable.compact thead td{padding:4px 17px 4px 4px}table.dataTable.compact tfoot th,table.dataTable.compact tfoot td{padding:4px}table.dataTable.compact tbody th,table.dataTable.compact tbody td{padding:4px}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center,table.dataTable td.dataTables_empty{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}table.dataTable,table.dataTable th,table.dataTable td{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.dataTables_wrapper{position:relative;clear:both;*zoom:1;zoom:1}.dataTables_wrapper .dataTables_length{float:left}.dataTables_wrapper .dataTables_filter{float:right;text-align:right}.dataTables_wrapper .dataTables_filter input{margin-left:0.5em}.dataTables_wrapper .dataTables_info{clear:both;float:left;padding-top:0.755em}.dataTables_wrapper .dataTables_paginate{float:right;text-align:right;padding-top:0.25em}.dataTables_wrapper .dataTables_paginate .paginate_button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:0.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;*cursor:hand;color:#333 !important;border:1px solid transparent;border-radius:2px}.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{color:#333 !important;border:1px solid #979797;background-color:white;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));background:-webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-o-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{cursor:default;color:#666 !important;border:1px solid transparent;background:transparent;box-shadow:none}.dataTables_wrapper .dataTables_paginate .paginate_button:hover{color:white !important;border:1px solid #111;background-color:#585858;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));background:-webkit-linear-gradient(top, #585858 0%, #111 100%);background:-moz-linear-gradient(top, #585858 0%, #111 100%);background:-ms-linear-gradient(top, #585858 0%, #111 100%);background:-o-linear-gradient(top, #585858 0%, #111 100%);background:linear-gradient(to bottom, #585858 0%, #111 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button:active{outline:none;background-color:#2b2b2b;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));background:-webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);box-shadow:inset 0 0 3px #111}.dataTables_wrapper .dataTables_paginate .ellipsis{padding:0 1em}.dataTables_wrapper .dataTables_processing{position:absolute;top:50%;left:50%;width:100%;height:40px;margin-left:-50%;margin-top:-25px;padding-top:20px;text-align:center;font-size:1.2em;background-color:white;background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%)}.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate{color:#333}.dataTables_wrapper .dataTables_scroll{clear:both}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody{*margin-top:-1px;-webkit-overflow-scrolling:touch}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td{vertical-align:middle}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td>div.dataTables_sizing{height:0;overflow:hidden;margin:0 !important;padding:0 !important}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:1px solid #111}.dataTables_wrapper.no-footer div.dataTables_scrollHead table,.dataTables_wrapper.no-footer div.dataTables_scrollBody table{border-bottom:none}.dataTables_wrapper:after{visibility:hidden;display:block;content:"";clear:both;height:0}@media screen and (max-width: 767px){.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{float:none;text-align:center}.dataTables_wrapper .dataTables_paginate{margin-top:0.5em}}@media screen and (max-width: 640px){.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{float:none;text-align:center}.dataTables_wrapper .dataTables_filter{margin-top:0.5em}}table.dataTable thead th div.DataTables_sort_wrapper{position:relative}table.dataTable thead th div.DataTables_sort_wrapper span{position:absolute;top:50%;margin-top:-8px;right:-18px}table.dataTable thead th.ui-state-default,table.dataTable tfoot th.ui-state-default{border-left-width:0}table.dataTable thead th.ui-state-default:first-child,table.dataTable tfoot th.ui-state-default:first-child{border-left-width:1px}.dataTables_wrapper .dataTables_paginate .fg-button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:0.5em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;*cursor:hand;border:1px solid transparent}.dataTables_wrapper .dataTables_paginate .fg-button:active{outline:none}.dataTables_wrapper .dataTables_paginate .fg-button:first-child{border-top-left-radius:3px;border-bottom-left-radius:3px}.dataTables_wrapper .dataTables_paginate .fg-button:last-child{border-top-right-radius:3px;border-bottom-right-radius:3px}.dataTables_wrapper .ui-widget-header{font-weight:normal}.dataTables_wrapper .ui-toolbar{padding:8px}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:none}.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate{color:inherit} diff --git a/media/css/dataTables.semanticui.css b/media/css/dataTables.semanticui.css index 69ecaf87..28305cbd 100644 --- a/media/css/dataTables.semanticui.css +++ b/media/css/dataTables.semanticui.css @@ -8,12 +8,6 @@ table.dataTable.table thead th, table.dataTable.table thead td { position: relative; } -table.dataTable.table thead th.sorting, table.dataTable.table thead th.sorting_asc, table.dataTable.table thead th.sorting_desc, -table.dataTable.table thead td.sorting, -table.dataTable.table thead td.sorting_asc, -table.dataTable.table thead td.sorting_desc { - padding-right: 20px; -} table.dataTable.table thead th.sorting:after, table.dataTable.table thead th.sorting_asc:after, table.dataTable.table thead th.sorting_desc:after, table.dataTable.table thead td.sorting:after, table.dataTable.table thead td.sorting_asc:after, @@ -29,6 +23,7 @@ table.dataTable.table thead td.sorting:after { content: "\f0dc"; color: #ddd; font-size: 0.8em; + padding-top: 0.12em; } table.dataTable.table thead th.sorting_asc:after, table.dataTable.table thead td.sorting_asc:after { @@ -53,10 +48,6 @@ table.dataTable.table.nowrap td { white-space: nowrap; } -div.dataTables_wrapper div.dataTables_length select { - vertical-align: middle; - min-height: 2.7142em; -} div.dataTables_wrapper div.dataTables_length .ui.selection.dropdown { min-width: 0; } @@ -78,26 +69,3 @@ div.dataTables_wrapper div.dataTables_processing { div.dataTables_wrapper div.row.dt-table { padding: 0; } -div.dataTables_wrapper div.dataTables_scrollHead table.dataTable { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - border-bottom: none; -} -div.dataTables_wrapper div.dataTables_scrollBody thead .sorting:after, -div.dataTables_wrapper div.dataTables_scrollBody thead .sorting_asc:after, -div.dataTables_wrapper div.dataTables_scrollBody thead .sorting_desc:after { - display: none; -} -div.dataTables_wrapper div.dataTables_scrollBody table.dataTable { - border-radius: 0; - border-top: none; - border-bottom-width: 0; -} -div.dataTables_wrapper div.dataTables_scrollBody table.dataTable.no-footer { - border-bottom-width: 1px; -} -div.dataTables_wrapper div.dataTables_scrollFoot table.dataTable { - border-top-right-radius: 0; - border-top-left-radius: 0; - border-top: none; -} diff --git a/media/css/dataTables.semanticui.min.css b/media/css/dataTables.semanticui.min.css index 4df32dab..e53683fa 100644 --- a/media/css/dataTables.semanticui.min.css +++ b/media/css/dataTables.semanticui.min.css @@ -1 +1 @@ -table.dataTable.table{margin:0}table.dataTable.table thead th,table.dataTable.table thead td{position:relative}table.dataTable.table thead th.sorting,table.dataTable.table thead th.sorting_asc,table.dataTable.table thead th.sorting_desc,table.dataTable.table thead td.sorting,table.dataTable.table thead td.sorting_asc,table.dataTable.table thead td.sorting_desc{padding-right:20px}table.dataTable.table thead th.sorting:after,table.dataTable.table thead th.sorting_asc:after,table.dataTable.table thead th.sorting_desc:after,table.dataTable.table thead td.sorting:after,table.dataTable.table thead td.sorting_asc:after,table.dataTable.table thead td.sorting_desc:after{position:absolute;top:12px;right:8px;display:block;font-family:Icons}table.dataTable.table thead th.sorting:after,table.dataTable.table thead td.sorting:after{content:"\f0dc";color:#ddd;font-size:0.8em}table.dataTable.table thead th.sorting_asc:after,table.dataTable.table thead td.sorting_asc:after{content:"\f0de"}table.dataTable.table thead th.sorting_desc:after,table.dataTable.table thead td.sorting_desc:after{content:"\f0dd"}table.dataTable.table td,table.dataTable.table th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable.table td.dataTables_empty,table.dataTable.table th.dataTables_empty{text-align:center}table.dataTable.table.nowrap th,table.dataTable.table.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{vertical-align:middle;min-height:2.7142em}div.dataTables_wrapper div.dataTables_length .ui.selection.dropdown{min-width:0}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em}div.dataTables_wrapper div.dataTables_info{padding-top:13px;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;text-align:center}div.dataTables_wrapper div.row.dt-table{padding:0}div.dataTables_wrapper div.dataTables_scrollHead table.dataTable{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:none}div.dataTables_wrapper div.dataTables_scrollBody thead .sorting:after,div.dataTables_wrapper div.dataTables_scrollBody thead .sorting_asc:after,div.dataTables_wrapper div.dataTables_scrollBody thead .sorting_desc:after{display:none}div.dataTables_wrapper div.dataTables_scrollBody table.dataTable{border-radius:0;border-top:none;border-bottom-width:0}div.dataTables_wrapper div.dataTables_scrollBody table.dataTable.no-footer{border-bottom-width:1px}div.dataTables_wrapper div.dataTables_scrollFoot table.dataTable{border-top-right-radius:0;border-top-left-radius:0;border-top:none} +table.dataTable.table{margin:0}table.dataTable.table thead th,table.dataTable.table thead td{position:relative}table.dataTable.table thead th.sorting:after,table.dataTable.table thead th.sorting_asc:after,table.dataTable.table thead th.sorting_desc:after,table.dataTable.table thead td.sorting:after,table.dataTable.table thead td.sorting_asc:after,table.dataTable.table thead td.sorting_desc:after{position:absolute;top:12px;right:8px;display:block;font-family:Icons}table.dataTable.table thead th.sorting:after,table.dataTable.table thead td.sorting:after{content:"\f0dc";color:#ddd;font-size:0.8em;padding-top:0.12em}table.dataTable.table thead th.sorting_asc:after,table.dataTable.table thead td.sorting_asc:after{content:"\f0de"}table.dataTable.table thead th.sorting_desc:after,table.dataTable.table thead td.sorting_desc:after{content:"\f0dd"}table.dataTable.table td,table.dataTable.table th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable.table td.dataTables_empty,table.dataTable.table th.dataTables_empty{text-align:center}table.dataTable.table.nowrap th,table.dataTable.table.nowrap td{white-space:nowrap}div.dataTables_wrapper div.dataTables_length .ui.selection.dropdown{min-width:0}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em}div.dataTables_wrapper div.dataTables_info{padding-top:13px;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;text-align:center}div.dataTables_wrapper div.row.dt-table{padding:0} diff --git a/media/css/dataTables.uikit.css b/media/css/dataTables.uikit.css index 8e1e21ee..72bfc953 100644 --- a/media/css/dataTables.uikit.css +++ b/media/css/dataTables.uikit.css @@ -7,6 +7,7 @@ table.dataTable { table.dataTable td, table.dataTable th { -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; box-sizing: content-box; } table.dataTable td.dataTables_empty, diff --git a/media/css/dataTables.uikit.min.css b/media/css/dataTables.uikit.min.css index 0818eed3..f42a2797 100644 --- a/media/css/dataTables.uikit.min.css +++ b/media/css/dataTables.uikit.min.css @@ -1 +1 @@ -table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.row.uk-grid.dt-merge-grid{margin-top:5px}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:8px;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th,table.dataTable thead>tr>td{position:relative}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>td.sorting:after,table.dataTable thead>tr>td.sorting_asc:after,table.dataTable thead>tr>td.sorting_desc:after{position:absolute;top:7px;right:8px;display:block;font-family:'FontAwesome'}table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>td.sorting:after{content:"\f0dc";color:#ddd;font-size:0.8em;padding-top:0.12em}table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>td.sorting_asc:after{content:"\f0de"}table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>td.sorting_desc:after{content:"\f0dd"}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.uk-table-condensed>thead>tr>th{padding-right:20px}table.dataTable.uk-table-condensed .sorting:after,table.dataTable.uk-table-condensed .sorting_asc:after,table.dataTable.uk-table-condensed .sorting_desc:after{top:6px;right:6px} +table.dataTable{clear:both;margin-top:6px !important;margin-bottom:6px !important;max-width:none !important}table.dataTable td,table.dataTable th{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}table.dataTable td.dataTables_empty,table.dataTable th.dataTables_empty{text-align:center}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}div.dataTables_wrapper div.row.uk-grid.dt-merge-grid{margin-top:5px}div.dataTables_wrapper div.dataTables_length label{font-weight:normal;text-align:left;white-space:nowrap}div.dataTables_wrapper div.dataTables_length select{width:75px;display:inline-block}div.dataTables_wrapper div.dataTables_filter{text-align:right}div.dataTables_wrapper div.dataTables_filter label{font-weight:normal;white-space:nowrap;text-align:left}div.dataTables_wrapper div.dataTables_filter input{margin-left:0.5em;display:inline-block;width:auto}div.dataTables_wrapper div.dataTables_info{padding-top:8px;white-space:nowrap}div.dataTables_wrapper div.dataTables_paginate{margin:0;white-space:nowrap;text-align:right}div.dataTables_wrapper div.dataTables_paginate ul.pagination{margin:2px 0;white-space:nowrap}div.dataTables_wrapper div.dataTables_processing{position:absolute;top:50%;left:50%;width:200px;margin-left:-100px;margin-top:-26px;text-align:center;padding:1em 0}table.dataTable thead>tr>th,table.dataTable thead>tr>td{position:relative}table.dataTable thead>tr>th.sorting_asc,table.dataTable thead>tr>th.sorting_desc,table.dataTable thead>tr>th.sorting,table.dataTable thead>tr>td.sorting_asc,table.dataTable thead>tr>td.sorting_desc,table.dataTable thead>tr>td.sorting{padding-right:30px}table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>td.sorting:after,table.dataTable thead>tr>td.sorting_asc:after,table.dataTable thead>tr>td.sorting_desc:after{position:absolute;top:7px;right:8px;display:block;font-family:'FontAwesome'}table.dataTable thead>tr>th.sorting:after,table.dataTable thead>tr>td.sorting:after{content:"\f0dc";color:#ddd;font-size:0.8em;padding-top:0.12em}table.dataTable thead>tr>th.sorting_asc:after,table.dataTable thead>tr>td.sorting_asc:after{content:"\f0de"}table.dataTable thead>tr>th.sorting_desc:after,table.dataTable thead>tr>td.sorting_desc:after{content:"\f0dd"}div.dataTables_scrollHead table.dataTable{margin-bottom:0 !important}div.dataTables_scrollBody table{border-top:none;margin-top:0 !important;margin-bottom:0 !important}div.dataTables_scrollBody table thead .sorting:after,div.dataTables_scrollBody table thead .sorting_asc:after,div.dataTables_scrollBody table thead .sorting_desc:after{display:none}div.dataTables_scrollBody table tbody tr:first-child th,div.dataTables_scrollBody table tbody tr:first-child td{border-top:none}div.dataTables_scrollFoot table{margin-top:0 !important;border-top:none}@media screen and (max-width: 767px){div.dataTables_wrapper div.dataTables_length,div.dataTables_wrapper div.dataTables_filter,div.dataTables_wrapper div.dataTables_info,div.dataTables_wrapper div.dataTables_paginate{text-align:center}}table.dataTable.uk-table-condensed>thead>tr>th{padding-right:20px}table.dataTable.uk-table-condensed .sorting:after,table.dataTable.uk-table-condensed .sorting_asc:after,table.dataTable.uk-table-condensed .sorting_desc:after{top:6px;right:6px} diff --git a/media/css/jquery.dataTables.css b/media/css/jquery.dataTables.css index 151b8587..e29a70c8 100644 --- a/media/css/jquery.dataTables.css +++ b/media/css/jquery.dataTables.css @@ -265,6 +265,7 @@ table.dataTable, table.dataTable th, table.dataTable td { -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; box-sizing: content-box; } diff --git a/media/css/jquery.dataTables.min.css b/media/css/jquery.dataTables.min.css index 781de6bf..9ec6ca31 100644 --- a/media/css/jquery.dataTables.min.css +++ b/media/css/jquery.dataTables.min.css @@ -1 +1 @@ -table.dataTable{width:100%;margin:0 auto;clear:both;border-collapse:separate;border-spacing:0}table.dataTable thead th,table.dataTable tfoot th{font-weight:bold}table.dataTable thead th,table.dataTable thead td{padding:10px 18px;border-bottom:1px solid #111}table.dataTable thead th:active,table.dataTable thead td:active{outline:none}table.dataTable tfoot th,table.dataTable tfoot td{padding:10px 18px 6px 18px;border-top:1px solid #111}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc{cursor:pointer;*cursor:hand}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table.dataTable thead .sorting{background-image:url("../images/sort_both.png")}table.dataTable thead .sorting_asc{background-image:url("../images/sort_asc.png")}table.dataTable thead .sorting_desc{background-image:url("../images/sort_desc.png")}table.dataTable thead .sorting_asc_disabled{background-image:url("../images/sort_asc_disabled.png")}table.dataTable thead .sorting_desc_disabled{background-image:url("../images/sort_desc_disabled.png")}table.dataTable tbody tr{background-color:#ffffff}table.dataTable tbody tr.selected{background-color:#B0BED9}table.dataTable tbody th,table.dataTable tbody td{padding:8px 10px}table.dataTable.row-border tbody th,table.dataTable.row-border tbody td,table.dataTable.display tbody th,table.dataTable.display tbody td{border-top:1px solid #ddd}table.dataTable.row-border tbody tr:first-child th,table.dataTable.row-border tbody tr:first-child td,table.dataTable.display tbody tr:first-child th,table.dataTable.display tbody tr:first-child td{border-top:none}table.dataTable.cell-border tbody th,table.dataTable.cell-border tbody td{border-top:1px solid #ddd;border-right:1px solid #ddd}table.dataTable.cell-border tbody tr th:first-child,table.dataTable.cell-border tbody tr td:first-child{border-left:1px solid #ddd}table.dataTable.cell-border tbody tr:first-child th,table.dataTable.cell-border tbody tr:first-child td{border-top:none}table.dataTable.stripe tbody tr.odd,table.dataTable.display tbody tr.odd{background-color:#f9f9f9}table.dataTable.stripe tbody tr.odd.selected,table.dataTable.display tbody tr.odd.selected{background-color:#acbad4}table.dataTable.hover tbody tr:hover,table.dataTable.display tbody tr:hover{background-color:#f6f6f6}table.dataTable.hover tbody tr:hover.selected,table.dataTable.display tbody tr:hover.selected{background-color:#aab7d1}table.dataTable.order-column tbody tr>.sorting_1,table.dataTable.order-column tbody tr>.sorting_2,table.dataTable.order-column tbody tr>.sorting_3,table.dataTable.display tbody tr>.sorting_1,table.dataTable.display tbody tr>.sorting_2,table.dataTable.display tbody tr>.sorting_3{background-color:#fafafa}table.dataTable.order-column tbody tr.selected>.sorting_1,table.dataTable.order-column tbody tr.selected>.sorting_2,table.dataTable.order-column tbody tr.selected>.sorting_3,table.dataTable.display tbody tr.selected>.sorting_1,table.dataTable.display tbody tr.selected>.sorting_2,table.dataTable.display tbody tr.selected>.sorting_3{background-color:#acbad5}table.dataTable.display tbody tr.odd>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd>.sorting_1{background-color:#f1f1f1}table.dataTable.display tbody tr.odd>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd>.sorting_2{background-color:#f3f3f3}table.dataTable.display tbody tr.odd>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd>.sorting_3{background-color:whitesmoke}table.dataTable.display tbody tr.odd.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_1{background-color:#a6b4cd}table.dataTable.display tbody tr.odd.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_2{background-color:#a8b5cf}table.dataTable.display tbody tr.odd.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_3{background-color:#a9b7d1}table.dataTable.display tbody tr.even>.sorting_1,table.dataTable.order-column.stripe tbody tr.even>.sorting_1{background-color:#fafafa}table.dataTable.display tbody tr.even>.sorting_2,table.dataTable.order-column.stripe tbody tr.even>.sorting_2{background-color:#fcfcfc}table.dataTable.display tbody tr.even>.sorting_3,table.dataTable.order-column.stripe tbody tr.even>.sorting_3{background-color:#fefefe}table.dataTable.display tbody tr.even.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_1{background-color:#acbad5}table.dataTable.display tbody tr.even.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_2{background-color:#aebcd6}table.dataTable.display tbody tr.even.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_3{background-color:#afbdd8}table.dataTable.display tbody tr:hover>.sorting_1,table.dataTable.order-column.hover tbody tr:hover>.sorting_1{background-color:#eaeaea}table.dataTable.display tbody tr:hover>.sorting_2,table.dataTable.order-column.hover tbody tr:hover>.sorting_2{background-color:#ececec}table.dataTable.display tbody tr:hover>.sorting_3,table.dataTable.order-column.hover tbody tr:hover>.sorting_3{background-color:#efefef}table.dataTable.display tbody tr:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1{background-color:#a2aec7}table.dataTable.display tbody tr:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_2{background-color:#a3b0c9}table.dataTable.display tbody tr:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3{background-color:#a5b2cb}table.dataTable.no-footer{border-bottom:1px solid #111}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable.compact thead th,table.dataTable.compact thead td{padding:4px 17px 4px 4px}table.dataTable.compact tfoot th,table.dataTable.compact tfoot td{padding:4px}table.dataTable.compact tbody th,table.dataTable.compact tbody td{padding:4px}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center,table.dataTable td.dataTables_empty{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}table.dataTable,table.dataTable th,table.dataTable td{-webkit-box-sizing:content-box;box-sizing:content-box}.dataTables_wrapper{position:relative;clear:both;*zoom:1;zoom:1}.dataTables_wrapper .dataTables_length{float:left}.dataTables_wrapper .dataTables_filter{float:right;text-align:right}.dataTables_wrapper .dataTables_filter input{margin-left:0.5em}.dataTables_wrapper .dataTables_info{clear:both;float:left;padding-top:0.755em}.dataTables_wrapper .dataTables_paginate{float:right;text-align:right;padding-top:0.25em}.dataTables_wrapper .dataTables_paginate .paginate_button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:0.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;*cursor:hand;color:#333 !important;border:1px solid transparent;border-radius:2px}.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{color:#333 !important;border:1px solid #979797;background-color:white;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));background:-webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-o-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{cursor:default;color:#666 !important;border:1px solid transparent;background:transparent;box-shadow:none}.dataTables_wrapper .dataTables_paginate .paginate_button:hover{color:white !important;border:1px solid #111;background-color:#585858;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));background:-webkit-linear-gradient(top, #585858 0%, #111 100%);background:-moz-linear-gradient(top, #585858 0%, #111 100%);background:-ms-linear-gradient(top, #585858 0%, #111 100%);background:-o-linear-gradient(top, #585858 0%, #111 100%);background:linear-gradient(to bottom, #585858 0%, #111 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button:active{outline:none;background-color:#2b2b2b;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));background:-webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);box-shadow:inset 0 0 3px #111}.dataTables_wrapper .dataTables_paginate .ellipsis{padding:0 1em}.dataTables_wrapper .dataTables_processing{position:absolute;top:50%;left:50%;width:100%;height:40px;margin-left:-50%;margin-top:-25px;padding-top:20px;text-align:center;font-size:1.2em;background-color:white;background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%)}.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate{color:#333}.dataTables_wrapper .dataTables_scroll{clear:both}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody{*margin-top:-1px;-webkit-overflow-scrolling:touch}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td{vertical-align:middle}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td>div.dataTables_sizing{height:0;overflow:hidden;margin:0 !important;padding:0 !important}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:1px solid #111}.dataTables_wrapper.no-footer div.dataTables_scrollHead table,.dataTables_wrapper.no-footer div.dataTables_scrollBody table{border-bottom:none}.dataTables_wrapper:after{visibility:hidden;display:block;content:"";clear:both;height:0}@media screen and (max-width: 767px){.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{float:none;text-align:center}.dataTables_wrapper .dataTables_paginate{margin-top:0.5em}}@media screen and (max-width: 640px){.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{float:none;text-align:center}.dataTables_wrapper .dataTables_filter{margin-top:0.5em}} +table.dataTable{width:100%;margin:0 auto;clear:both;border-collapse:separate;border-spacing:0}table.dataTable thead th,table.dataTable tfoot th{font-weight:bold}table.dataTable thead th,table.dataTable thead td{padding:10px 18px;border-bottom:1px solid #111}table.dataTable thead th:active,table.dataTable thead td:active{outline:none}table.dataTable tfoot th,table.dataTable tfoot td{padding:10px 18px 6px 18px;border-top:1px solid #111}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc{cursor:pointer;*cursor:hand}table.dataTable thead .sorting,table.dataTable thead .sorting_asc,table.dataTable thead .sorting_desc,table.dataTable thead .sorting_asc_disabled,table.dataTable thead .sorting_desc_disabled{background-repeat:no-repeat;background-position:center right}table.dataTable thead .sorting{background-image:url("../images/sort_both.png")}table.dataTable thead .sorting_asc{background-image:url("../images/sort_asc.png")}table.dataTable thead .sorting_desc{background-image:url("../images/sort_desc.png")}table.dataTable thead .sorting_asc_disabled{background-image:url("../images/sort_asc_disabled.png")}table.dataTable thead .sorting_desc_disabled{background-image:url("../images/sort_desc_disabled.png")}table.dataTable tbody tr{background-color:#ffffff}table.dataTable tbody tr.selected{background-color:#B0BED9}table.dataTable tbody th,table.dataTable tbody td{padding:8px 10px}table.dataTable.row-border tbody th,table.dataTable.row-border tbody td,table.dataTable.display tbody th,table.dataTable.display tbody td{border-top:1px solid #ddd}table.dataTable.row-border tbody tr:first-child th,table.dataTable.row-border tbody tr:first-child td,table.dataTable.display tbody tr:first-child th,table.dataTable.display tbody tr:first-child td{border-top:none}table.dataTable.cell-border tbody th,table.dataTable.cell-border tbody td{border-top:1px solid #ddd;border-right:1px solid #ddd}table.dataTable.cell-border tbody tr th:first-child,table.dataTable.cell-border tbody tr td:first-child{border-left:1px solid #ddd}table.dataTable.cell-border tbody tr:first-child th,table.dataTable.cell-border tbody tr:first-child td{border-top:none}table.dataTable.stripe tbody tr.odd,table.dataTable.display tbody tr.odd{background-color:#f9f9f9}table.dataTable.stripe tbody tr.odd.selected,table.dataTable.display tbody tr.odd.selected{background-color:#acbad4}table.dataTable.hover tbody tr:hover,table.dataTable.display tbody tr:hover{background-color:#f6f6f6}table.dataTable.hover tbody tr:hover.selected,table.dataTable.display tbody tr:hover.selected{background-color:#aab7d1}table.dataTable.order-column tbody tr>.sorting_1,table.dataTable.order-column tbody tr>.sorting_2,table.dataTable.order-column tbody tr>.sorting_3,table.dataTable.display tbody tr>.sorting_1,table.dataTable.display tbody tr>.sorting_2,table.dataTable.display tbody tr>.sorting_3{background-color:#fafafa}table.dataTable.order-column tbody tr.selected>.sorting_1,table.dataTable.order-column tbody tr.selected>.sorting_2,table.dataTable.order-column tbody tr.selected>.sorting_3,table.dataTable.display tbody tr.selected>.sorting_1,table.dataTable.display tbody tr.selected>.sorting_2,table.dataTable.display tbody tr.selected>.sorting_3{background-color:#acbad5}table.dataTable.display tbody tr.odd>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd>.sorting_1{background-color:#f1f1f1}table.dataTable.display tbody tr.odd>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd>.sorting_2{background-color:#f3f3f3}table.dataTable.display tbody tr.odd>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd>.sorting_3{background-color:whitesmoke}table.dataTable.display tbody tr.odd.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_1{background-color:#a6b4cd}table.dataTable.display tbody tr.odd.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_2{background-color:#a8b5cf}table.dataTable.display tbody tr.odd.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.odd.selected>.sorting_3{background-color:#a9b7d1}table.dataTable.display tbody tr.even>.sorting_1,table.dataTable.order-column.stripe tbody tr.even>.sorting_1{background-color:#fafafa}table.dataTable.display tbody tr.even>.sorting_2,table.dataTable.order-column.stripe tbody tr.even>.sorting_2{background-color:#fcfcfc}table.dataTable.display tbody tr.even>.sorting_3,table.dataTable.order-column.stripe tbody tr.even>.sorting_3{background-color:#fefefe}table.dataTable.display tbody tr.even.selected>.sorting_1,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_1{background-color:#acbad5}table.dataTable.display tbody tr.even.selected>.sorting_2,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_2{background-color:#aebcd6}table.dataTable.display tbody tr.even.selected>.sorting_3,table.dataTable.order-column.stripe tbody tr.even.selected>.sorting_3{background-color:#afbdd8}table.dataTable.display tbody tr:hover>.sorting_1,table.dataTable.order-column.hover tbody tr:hover>.sorting_1{background-color:#eaeaea}table.dataTable.display tbody tr:hover>.sorting_2,table.dataTable.order-column.hover tbody tr:hover>.sorting_2{background-color:#ececec}table.dataTable.display tbody tr:hover>.sorting_3,table.dataTable.order-column.hover tbody tr:hover>.sorting_3{background-color:#efefef}table.dataTable.display tbody tr:hover.selected>.sorting_1,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_1{background-color:#a2aec7}table.dataTable.display tbody tr:hover.selected>.sorting_2,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_2{background-color:#a3b0c9}table.dataTable.display tbody tr:hover.selected>.sorting_3,table.dataTable.order-column.hover tbody tr:hover.selected>.sorting_3{background-color:#a5b2cb}table.dataTable.no-footer{border-bottom:1px solid #111}table.dataTable.nowrap th,table.dataTable.nowrap td{white-space:nowrap}table.dataTable.compact thead th,table.dataTable.compact thead td{padding:4px 17px 4px 4px}table.dataTable.compact tfoot th,table.dataTable.compact tfoot td{padding:4px}table.dataTable.compact tbody th,table.dataTable.compact tbody td{padding:4px}table.dataTable th.dt-left,table.dataTable td.dt-left{text-align:left}table.dataTable th.dt-center,table.dataTable td.dt-center,table.dataTable td.dataTables_empty{text-align:center}table.dataTable th.dt-right,table.dataTable td.dt-right{text-align:right}table.dataTable th.dt-justify,table.dataTable td.dt-justify{text-align:justify}table.dataTable th.dt-nowrap,table.dataTable td.dt-nowrap{white-space:nowrap}table.dataTable thead th.dt-head-left,table.dataTable thead td.dt-head-left,table.dataTable tfoot th.dt-head-left,table.dataTable tfoot td.dt-head-left{text-align:left}table.dataTable thead th.dt-head-center,table.dataTable thead td.dt-head-center,table.dataTable tfoot th.dt-head-center,table.dataTable tfoot td.dt-head-center{text-align:center}table.dataTable thead th.dt-head-right,table.dataTable thead td.dt-head-right,table.dataTable tfoot th.dt-head-right,table.dataTable tfoot td.dt-head-right{text-align:right}table.dataTable thead th.dt-head-justify,table.dataTable thead td.dt-head-justify,table.dataTable tfoot th.dt-head-justify,table.dataTable tfoot td.dt-head-justify{text-align:justify}table.dataTable thead th.dt-head-nowrap,table.dataTable thead td.dt-head-nowrap,table.dataTable tfoot th.dt-head-nowrap,table.dataTable tfoot td.dt-head-nowrap{white-space:nowrap}table.dataTable tbody th.dt-body-left,table.dataTable tbody td.dt-body-left{text-align:left}table.dataTable tbody th.dt-body-center,table.dataTable tbody td.dt-body-center{text-align:center}table.dataTable tbody th.dt-body-right,table.dataTable tbody td.dt-body-right{text-align:right}table.dataTable tbody th.dt-body-justify,table.dataTable tbody td.dt-body-justify{text-align:justify}table.dataTable tbody th.dt-body-nowrap,table.dataTable tbody td.dt-body-nowrap{white-space:nowrap}table.dataTable,table.dataTable th,table.dataTable td{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.dataTables_wrapper{position:relative;clear:both;*zoom:1;zoom:1}.dataTables_wrapper .dataTables_length{float:left}.dataTables_wrapper .dataTables_filter{float:right;text-align:right}.dataTables_wrapper .dataTables_filter input{margin-left:0.5em}.dataTables_wrapper .dataTables_info{clear:both;float:left;padding-top:0.755em}.dataTables_wrapper .dataTables_paginate{float:right;text-align:right;padding-top:0.25em}.dataTables_wrapper .dataTables_paginate .paginate_button{box-sizing:border-box;display:inline-block;min-width:1.5em;padding:0.5em 1em;margin-left:2px;text-align:center;text-decoration:none !important;cursor:pointer;*cursor:hand;color:#333 !important;border:1px solid transparent;border-radius:2px}.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{color:#333 !important;border:1px solid #979797;background-color:white;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #fff), color-stop(100%, #dcdcdc));background:-webkit-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-moz-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-ms-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:-o-linear-gradient(top, #fff 0%, #dcdcdc 100%);background:linear-gradient(to bottom, #fff 0%, #dcdcdc 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active{cursor:default;color:#666 !important;border:1px solid transparent;background:transparent;box-shadow:none}.dataTables_wrapper .dataTables_paginate .paginate_button:hover{color:white !important;border:1px solid #111;background-color:#585858;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111));background:-webkit-linear-gradient(top, #585858 0%, #111 100%);background:-moz-linear-gradient(top, #585858 0%, #111 100%);background:-ms-linear-gradient(top, #585858 0%, #111 100%);background:-o-linear-gradient(top, #585858 0%, #111 100%);background:linear-gradient(to bottom, #585858 0%, #111 100%)}.dataTables_wrapper .dataTables_paginate .paginate_button:active{outline:none;background-color:#2b2b2b;background:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));background:-webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:-o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);background:linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);box-shadow:inset 0 0 3px #111}.dataTables_wrapper .dataTables_paginate .ellipsis{padding:0 1em}.dataTables_wrapper .dataTables_processing{position:absolute;top:50%;left:50%;width:100%;height:40px;margin-left:-50%;margin-top:-25px;padding-top:20px;text-align:center;font-size:1.2em;background-color:white;background:-webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));background:-webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:-o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);background:linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%)}.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_processing,.dataTables_wrapper .dataTables_paginate{color:#333}.dataTables_wrapper .dataTables_scroll{clear:both}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody{*margin-top:-1px;-webkit-overflow-scrolling:touch}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td{vertical-align:middle}.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th>div.dataTables_sizing,.dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td>div.dataTables_sizing{height:0;overflow:hidden;margin:0 !important;padding:0 !important}.dataTables_wrapper.no-footer .dataTables_scrollBody{border-bottom:1px solid #111}.dataTables_wrapper.no-footer div.dataTables_scrollHead table,.dataTables_wrapper.no-footer div.dataTables_scrollBody table{border-bottom:none}.dataTables_wrapper:after{visibility:hidden;display:block;content:"";clear:both;height:0}@media screen and (max-width: 767px){.dataTables_wrapper .dataTables_info,.dataTables_wrapper .dataTables_paginate{float:none;text-align:center}.dataTables_wrapper .dataTables_paginate{margin-top:0.5em}}@media screen and (max-width: 640px){.dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{float:none;text-align:center}.dataTables_wrapper .dataTables_filter{margin-top:0.5em}} diff --git a/media/js/dataTables.foundation.js b/media/js/dataTables.foundation.js index 4d3bb45e..1e87c4b3 100644 --- a/media/js/dataTables.foundation.js +++ b/media/js/dataTables.foundation.js @@ -47,7 +47,7 @@ meta.remove(); $.extend( DataTable.ext.classes, { sWrapper: "dataTables_wrapper dt-foundation", - sProcessing: "dataTables_processing panel callout" + sProcessing: "dataTables_processing panel" } ); diff --git a/media/js/dataTables.foundation.min.js b/media/js/dataTables.foundation.min.js index d47166b4..58c7b030 100644 --- a/media/js/dataTables.foundation.min.js +++ b/media/js/dataTables.foundation.min.js @@ -3,6 +3,6 @@ ©2011-2015 SpryMedia Ltd - datatables.net/license */ (function(d){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(a){return d(a,window,document)}):"object"===typeof exports?module.exports=function(a,b){a||(a=window);if(!b||!b.fn.dataTable)b=require("datatables.net")(a,b).$;return d(b,a,a.document)}:d(jQuery,window,document)})(function(d){var a=d.fn.dataTable,b=d('').appendTo("head");a.ext.foundationVersion=b.css("font-family").match(/small|medium|large/)?6:5;b.remove();d.extend(a.ext.classes, -{sWrapper:"dataTables_wrapper dt-foundation",sProcessing:"dataTables_processing panel callout"});d.extend(!0,a.defaults,{dom:"<'row'<'small-6 columns'l><'small-6 columns'f>r>t<'row'<'small-6 columns'i><'small-6 columns'p>>",renderer:"foundation"});a.ext.renderer.pageButton.foundation=function(b,l,r,s,e,i){var m=new a.Api(b),t=b.oClasses,j=b.oLanguage.oPaginate,u=b.oLanguage.oAria.paginate||{},f,h,g,v=5===a.ext.foundationVersion,q=function(a,n){var k,o,p,c,l=function(a){a.preventDefault();!d(a.currentTarget).hasClass("unavailable")&& +{sWrapper:"dataTables_wrapper dt-foundation",sProcessing:"dataTables_processing panel"});d.extend(!0,a.defaults,{dom:"<'row'<'small-6 columns'l><'small-6 columns'f>r>t<'row'<'small-6 columns'i><'small-6 columns'p>>",renderer:"foundation"});a.ext.renderer.pageButton.foundation=function(b,l,r,s,e,i){var m=new a.Api(b),t=b.oClasses,j=b.oLanguage.oPaginate,u=b.oLanguage.oAria.paginate||{},f,h,g,v=5===a.ext.foundationVersion,q=function(a,n){var k,o,p,c,l=function(a){a.preventDefault();!d(a.currentTarget).hasClass("unavailable")&& m.page()!=a.data.action&&m.page(a.data.action).draw("page")};k=0;for(o=n.length;k",{"class":t.sPageButton+" "+h,"aria-controls":b.sTableId,"aria-label":u[c],tabindex:b.iTabIndex,id:0===r&&"string"===typeof c?b.sTableId+"_"+c:null}).append(g?d("<"+g+"/>",{href:"#"}).html(f):f).appendTo(a),b.oApi._fnBindAction(p,{action:c},l))}};q(d(l).empty().html('
    ').children("ul"),s)};return a}); diff --git a/media/js/jquery.dataTables.js b/media/js/jquery.dataTables.js index 8e0af87f..eb5d314c 100644 --- a/media/js/jquery.dataTables.js +++ b/media/js/jquery.dataTables.js @@ -1,11 +1,11 @@ -/*! DataTables 1.10.13-dev +/*! DataTables 1.10.12-dev * ©2008-2015 SpryMedia Ltd - datatables.net/license */ /** * @summary DataTables * @description Paginate, search and order HTML tables - * @version 1.10.13-dev + * @version 1.10.12-dev * @file jquery.dataTables.js * @author SpryMedia Ltd (www.sprymedia.co.uk) * @contact www.sprymedia.co.uk/contact @@ -91,1251 +91,7 @@ * } ); * } ); */ - var DataTable = function ( options ) - { - /** - * Perform a jQuery selector action on the table's TR elements (from the tbody) and - * return the resulting jQuery object. - * @param {string|node|jQuery} sSelector jQuery selector or node collection to act on - * @param {object} [oOpts] Optional parameters for modifying the rows to be included - * @param {string} [oOpts.filter=none] Select TR elements that meet the current filter - * criterion ("applied") or all TR elements (i.e. no filter). - * @param {string} [oOpts.order=current] Order of the TR elements in the processed array. - * Can be either 'current', whereby the current sorting of the table is used, or - * 'original' whereby the original order the data was read into the table is used. - * @param {string} [oOpts.page=all] Limit the selection to the currently displayed page - * ("current") or not ("all"). If 'current' is given, then order is assumed to be - * 'current' and filter is 'applied', regardless of what they might be given as. - * @returns {object} jQuery object, filtered by the given selector. - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * - * // Highlight every second row - * oTable.$('tr:odd').css('backgroundColor', 'blue'); - * } ); - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * - * // Filter to rows with 'Webkit' in them, add a background colour and then - * // remove the filter, thus highlighting the 'Webkit' rows only. - * oTable.fnFilter('Webkit'); - * oTable.$('tr', {"search": "applied"}).css('backgroundColor', 'blue'); - * oTable.fnFilter(''); - * } ); - */ - this.$ = function ( sSelector, oOpts ) - { - return this.api(true).$( sSelector, oOpts ); - }; - - - /** - * Almost identical to $ in operation, but in this case returns the data for the matched - * rows - as such, the jQuery selector used should match TR row nodes or TD/TH cell nodes - * rather than any descendants, so the data can be obtained for the row/cell. If matching - * rows are found, the data returned is the original data array/object that was used to - * create the row (or a generated array if from a DOM source). - * - * This method is often useful in-combination with $ where both functions are given the - * same parameters and the array indexes will match identically. - * @param {string|node|jQuery} sSelector jQuery selector or node collection to act on - * @param {object} [oOpts] Optional parameters for modifying the rows to be included - * @param {string} [oOpts.filter=none] Select elements that meet the current filter - * criterion ("applied") or all elements (i.e. no filter). - * @param {string} [oOpts.order=current] Order of the data in the processed array. - * Can be either 'current', whereby the current sorting of the table is used, or - * 'original' whereby the original order the data was read into the table is used. - * @param {string} [oOpts.page=all] Limit the selection to the currently displayed page - * ("current") or not ("all"). If 'current' is given, then order is assumed to be - * 'current' and filter is 'applied', regardless of what they might be given as. - * @returns {array} Data for the matched elements. If any elements, as a result of the - * selector, were not TR, TD or TH elements in the DataTable, they will have a null - * entry in the array. - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * - * // Get the data from the first row in the table - * var data = oTable._('tr:first'); - * - * // Do something useful with the data - * alert( "First cell is: "+data[0] ); - * } ); - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * - * // Filter to 'Webkit' and get all data for - * oTable.fnFilter('Webkit'); - * var data = oTable._('tr', {"search": "applied"}); - * - * // Do something with the data - * alert( data.length+" rows matched the search" ); - * } ); - */ - this._ = function ( sSelector, oOpts ) - { - return this.api(true).rows( sSelector, oOpts ).data(); - }; - - - /** - * Create a DataTables Api instance, with the currently selected tables for - * the Api's context. - * @param {boolean} [traditional=false] Set the API instance's context to be - * only the table referred to by the `DataTable.ext.iApiIndex` option, as was - * used in the API presented by DataTables 1.9- (i.e. the traditional mode), - * or if all tables captured in the jQuery object should be used. - * @return {DataTables.Api} - */ - this.api = function ( traditional ) - { - return traditional ? - new _Api( - _fnSettingsFromNode( this[ _ext.iApiIndex ] ) - ) : - new _Api( this ); - }; - - - /** - * Add a single new row or multiple rows of data to the table. Please note - * that this is suitable for client-side processing only - if you are using - * server-side processing (i.e. "bServerSide": true), then to add data, you - * must add it to the data source, i.e. the server-side, through an Ajax call. - * @param {array|object} data The data to be added to the table. This can be: - *
      - *
    • 1D array of data - add a single row with the data provided
      • - *
    • 2D array of arrays - add multiple rows in a single call
      • - *
    • object - data object when using mData
      • - *
    • array of objects - multiple data objects when using mData
      • - *
    - * @param {bool} [redraw=true] redraw the table or not - * @returns {array} An array of integers, representing the list of indexes in - * aoData ({@link DataTable.models.oSettings}) that have been added to - * the table. - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * // Global var for counter - * var giCount = 2; - * - * $(document).ready(function() { - * $('#example').dataTable(); - * } ); - * - * function fnClickAddRow() { - * $('#example').dataTable().fnAddData( [ - * giCount+".1", - * giCount+".2", - * giCount+".3", - * giCount+".4" ] - * ); - * - * giCount++; - * } - */ - this.fnAddData = function( data, redraw ) - { - var api = this.api( true ); - - /* Check if we want to add multiple rows or not */ - var rows = $.isArray(data) && ( $.isArray(data[0]) || $.isPlainObject(data[0]) ) ? - api.rows.add( data ) : - api.row.add( data ); - - if ( redraw === undefined || redraw ) { - api.draw(); - } - - return rows.flatten().toArray(); - }; - - - /** - * This function will make DataTables recalculate the column sizes, based on the data - * contained in the table and the sizes applied to the columns (in the DOM, CSS or - * through the sWidth parameter). This can be useful when the width of the table's - * parent element changes (for example a window resize). - * @param {boolean} [bRedraw=true] Redraw the table or not, you will typically want to - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable( { - * "sScrollY": "200px", - * "bPaginate": false - * } ); - * - * $(window).on('resize', function () { - * oTable.fnAdjustColumnSizing(); - * } ); - * } ); - */ - this.fnAdjustColumnSizing = function ( bRedraw ) - { - var api = this.api( true ).columns.adjust(); - var settings = api.settings()[0]; - var scroll = settings.oScroll; - - if ( bRedraw === undefined || bRedraw ) { - api.draw( false ); - } - else if ( scroll.sX !== "" || scroll.sY !== "" ) { - /* If not redrawing, but scrolling, we want to apply the new column sizes anyway */ - _fnScrollDraw( settings ); - } - }; - - - /** - * Quickly and simply clear a table - * @param {bool} [bRedraw=true] redraw the table or not - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * - * // Immediately 'nuke' the current rows (perhaps waiting for an Ajax callback...) - * oTable.fnClearTable(); - * } ); - */ - this.fnClearTable = function( bRedraw ) - { - var api = this.api( true ).clear(); - - if ( bRedraw === undefined || bRedraw ) { - api.draw(); - } - }; - - - /** - * The exact opposite of 'opening' a row, this function will close any rows which - * are currently 'open'. - * @param {node} nTr the table row to 'close' - * @returns {int} 0 on success, or 1 if failed (can't find the row) - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable; - * - * // 'open' an information row when a row is clicked on - * $('#example tbody tr').click( function () { - * if ( oTable.fnIsOpen(this) ) { - * oTable.fnClose( this ); - * } else { - * oTable.fnOpen( this, "Temporary row opened", "info_row" ); - * } - * } ); - * - * oTable = $('#example').dataTable(); - * } ); - */ - this.fnClose = function( nTr ) - { - this.api( true ).row( nTr ).child.hide(); - }; - - - /** - * Remove a row for the table - * @param {mixed} target The index of the row from aoData to be deleted, or - * the TR element you want to delete - * @param {function|null} [callBack] Callback function - * @param {bool} [redraw=true] Redraw the table or not - * @returns {array} The row that was deleted - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * - * // Immediately remove the first row - * oTable.fnDeleteRow( 0 ); - * } ); - */ - this.fnDeleteRow = function( target, callback, redraw ) - { - var api = this.api( true ); - var rows = api.rows( target ); - var settings = rows.settings()[0]; - var data = settings.aoData[ rows[0][0] ]; - - rows.remove(); - - if ( callback ) { - callback.call( this, settings, data ); - } - - if ( redraw === undefined || redraw ) { - api.draw(); - } - - return data; - }; - - - /** - * Restore the table to it's original state in the DOM by removing all of DataTables - * enhancements, alterations to the DOM structure of the table and event listeners. - * @param {boolean} [remove=false] Completely remove the table from the DOM - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * // This example is fairly pointless in reality, but shows how fnDestroy can be used - * var oTable = $('#example').dataTable(); - * oTable.fnDestroy(); - * } ); - */ - this.fnDestroy = function ( remove ) - { - this.api( true ).destroy( remove ); - }; - - - /** - * Redraw the table - * @param {bool} [complete=true] Re-filter and resort (if enabled) the table before the draw. - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * - * // Re-draw the table - you wouldn't want to do it here, but it's an example :-) - * oTable.fnDraw(); - * } ); - */ - this.fnDraw = function( complete ) - { - // Note that this isn't an exact match to the old call to _fnDraw - it takes - // into account the new data, but can hold position. - this.api( true ).draw( complete ); - }; - - - /** - * Filter the input based on data - * @param {string} sInput String to filter the table on - * @param {int|null} [iColumn] Column to limit filtering to - * @param {bool} [bRegex=false] Treat as regular expression or not - * @param {bool} [bSmart=true] Perform smart filtering or not - * @param {bool} [bShowGlobal=true] Show the input global filter in it's input box(es) - * @param {bool} [bCaseInsensitive=true] Do case-insensitive matching (true) or not (false) - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * - * // Sometime later - filter... - * oTable.fnFilter( 'test string' ); - * } ); - */ - this.fnFilter = function( sInput, iColumn, bRegex, bSmart, bShowGlobal, bCaseInsensitive ) - { - var api = this.api( true ); - - if ( iColumn === null || iColumn === undefined ) { - api.search( sInput, bRegex, bSmart, bCaseInsensitive ); - } - else { - api.column( iColumn ).search( sInput, bRegex, bSmart, bCaseInsensitive ); - } - - api.draw(); - }; - - - /** - * Get the data for the whole table, an individual row or an individual cell based on the - * provided parameters. - * @param {int|node} [src] A TR row node, TD/TH cell node or an integer. If given as - * a TR node then the data source for the whole row will be returned. If given as a - * TD/TH cell node then iCol will be automatically calculated and the data for the - * cell returned. If given as an integer, then this is treated as the aoData internal - * data index for the row (see fnGetPosition) and the data for that row used. - * @param {int} [col] Optional column index that you want the data of. - * @returns {array|object|string} If mRow is undefined, then the data for all rows is - * returned. If mRow is defined, just data for that row, and is iCol is - * defined, only data for the designated cell is returned. - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * // Row data - * $(document).ready(function() { - * oTable = $('#example').dataTable(); - * - * oTable.$('tr').click( function () { - * var data = oTable.fnGetData( this ); - * // ... do something with the array / object of data for the row - * } ); - * } ); - * - * @example - * // Individual cell data - * $(document).ready(function() { - * oTable = $('#example').dataTable(); - * - * oTable.$('td').click( function () { - * var sData = oTable.fnGetData( this ); - * alert( 'The cell clicked on had the value of '+sData ); - * } ); - * } ); - */ - this.fnGetData = function( src, col ) - { - var api = this.api( true ); - - if ( src !== undefined ) { - var type = src.nodeName ? src.nodeName.toLowerCase() : ''; - - return col !== undefined || type == 'td' || type == 'th' ? - api.cell( src, col ).data() : - api.row( src ).data() || null; - } - - return api.data().toArray(); - }; - - - /** - * Get an array of the TR nodes that are used in the table's body. Note that you will - * typically want to use the '$' API method in preference to this as it is more - * flexible. - * @param {int} [iRow] Optional row index for the TR element you want - * @returns {array|node} If iRow is undefined, returns an array of all TR elements - * in the table's body, or iRow is defined, just the TR element requested. - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * - * // Get the nodes from the table - * var nNodes = oTable.fnGetNodes( ); - * } ); - */ - this.fnGetNodes = function( iRow ) - { - var api = this.api( true ); - - return iRow !== undefined ? - api.row( iRow ).node() : - api.rows().nodes().flatten().toArray(); - }; - - - /** - * Get the array indexes of a particular cell from it's DOM element - * and column index including hidden columns - * @param {node} node this can either be a TR, TD or TH in the table's body - * @returns {int} If nNode is given as a TR, then a single index is returned, or - * if given as a cell, an array of [row index, column index (visible), - * column index (all)] is given. - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * $('#example tbody td').click( function () { - * // Get the position of the current data from the node - * var aPos = oTable.fnGetPosition( this ); - * - * // Get the data array for this row - * var aData = oTable.fnGetData( aPos[0] ); - * - * // Update the data array and return the value - * aData[ aPos[1] ] = 'clicked'; - * this.innerHTML = 'clicked'; - * } ); - * - * // Init DataTables - * oTable = $('#example').dataTable(); - * } ); - */ - this.fnGetPosition = function( node ) - { - var api = this.api( true ); - var nodeName = node.nodeName.toUpperCase(); - - if ( nodeName == 'TR' ) { - return api.row( node ).index(); - } - else if ( nodeName == 'TD' || nodeName == 'TH' ) { - var cell = api.cell( node ).index(); - - return [ - cell.row, - cell.columnVisible, - cell.column - ]; - } - return null; - }; - - - /** - * Check to see if a row is 'open' or not. - * @param {node} nTr the table row to check - * @returns {boolean} true if the row is currently open, false otherwise - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable; - * - * // 'open' an information row when a row is clicked on - * $('#example tbody tr').click( function () { - * if ( oTable.fnIsOpen(this) ) { - * oTable.fnClose( this ); - * } else { - * oTable.fnOpen( this, "Temporary row opened", "info_row" ); - * } - * } ); - * - * oTable = $('#example').dataTable(); - * } ); - */ - this.fnIsOpen = function( nTr ) - { - return this.api( true ).row( nTr ).child.isShown(); - }; - - - /** - * This function will place a new row directly after a row which is currently - * on display on the page, with the HTML contents that is passed into the - * function. This can be used, for example, to ask for confirmation that a - * particular record should be deleted. - * @param {node} nTr The table row to 'open' - * @param {string|node|jQuery} mHtml The HTML to put into the row - * @param {string} sClass Class to give the new TD cell - * @returns {node} The row opened. Note that if the table row passed in as the - * first parameter, is not found in the table, this method will silently - * return. - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable; - * - * // 'open' an information row when a row is clicked on - * $('#example tbody tr').click( function () { - * if ( oTable.fnIsOpen(this) ) { - * oTable.fnClose( this ); - * } else { - * oTable.fnOpen( this, "Temporary row opened", "info_row" ); - * } - * } ); - * - * oTable = $('#example').dataTable(); - * } ); - */ - this.fnOpen = function( nTr, mHtml, sClass ) - { - return this.api( true ) - .row( nTr ) - .child( mHtml, sClass ) - .show() - .child()[0]; - }; - - - /** - * Change the pagination - provides the internal logic for pagination in a simple API - * function. With this function you can have a DataTables table go to the next, - * previous, first or last pages. - * @param {string|int} mAction Paging action to take: "first", "previous", "next" or "last" - * or page number to jump to (integer), note that page 0 is the first page. - * @param {bool} [bRedraw=true] Redraw the table or not - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * oTable.fnPageChange( 'next' ); - * } ); - */ - this.fnPageChange = function ( mAction, bRedraw ) - { - var api = this.api( true ).page( mAction ); - - if ( bRedraw === undefined || bRedraw ) { - api.draw(false); - } - }; - - - /** - * Show a particular column - * @param {int} iCol The column whose display should be changed - * @param {bool} bShow Show (true) or hide (false) the column - * @param {bool} [bRedraw=true] Redraw the table or not - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * - * // Hide the second column after initialisation - * oTable.fnSetColumnVis( 1, false ); - * } ); - */ - this.fnSetColumnVis = function ( iCol, bShow, bRedraw ) - { - var api = this.api( true ).column( iCol ).visible( bShow ); - - if ( bRedraw === undefined || bRedraw ) { - api.columns.adjust().draw(); - } - }; - - - /** - * Get the settings for a particular table for external manipulation - * @returns {object} DataTables settings object. See - * {@link DataTable.models.oSettings} - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * var oSettings = oTable.fnSettings(); - * - * // Show an example parameter from the settings - * alert( oSettings._iDisplayStart ); - * } ); - */ - this.fnSettings = function() - { - return _fnSettingsFromNode( this[_ext.iApiIndex] ); - }; - - - /** - * Sort the table by a particular column - * @param {int} iCol the data index to sort on. Note that this will not match the - * 'display index' if you have hidden data entries - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * - * // Sort immediately with columns 0 and 1 - * oTable.fnSort( [ [0,'asc'], [1,'asc'] ] ); - * } ); - */ - this.fnSort = function( aaSort ) - { - this.api( true ).order( aaSort ).draw(); - }; - - - /** - * Attach a sort listener to an element for a given column - * @param {node} nNode the element to attach the sort listener to - * @param {int} iColumn the column that a click on this node will sort on - * @param {function} [fnCallback] callback function when sort is run - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * - * // Sort on column 1, when 'sorter' is clicked on - * oTable.fnSortListener( document.getElementById('sorter'), 1 ); - * } ); - */ - this.fnSortListener = function( nNode, iColumn, fnCallback ) - { - this.api( true ).order.listener( nNode, iColumn, fnCallback ); - }; - - - /** - * Update a table cell or row - this method will accept either a single value to - * update the cell with, an array of values with one element for each column or - * an object in the same format as the original data source. The function is - * self-referencing in order to make the multi column updates easier. - * @param {object|array|string} mData Data to update the cell/row with - * @param {node|int} mRow TR element you want to update or the aoData index - * @param {int} [iColumn] The column to update, give as null or undefined to - * update a whole row. - * @param {bool} [bRedraw=true] Redraw the table or not - * @param {bool} [bAction=true] Perform pre-draw actions or not - * @returns {int} 0 on success, 1 on error - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * oTable.fnUpdate( 'Example update', 0, 0 ); // Single cell - * oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], $('tbody tr')[0] ); // Row - * } ); - */ - this.fnUpdate = function( mData, mRow, iColumn, bRedraw, bAction ) - { - var api = this.api( true ); - - if ( iColumn === undefined || iColumn === null ) { - api.row( mRow ).data( mData ); - } - else { - api.cell( mRow, iColumn ).data( mData ); - } - - if ( bAction === undefined || bAction ) { - api.columns.adjust(); - } - - if ( bRedraw === undefined || bRedraw ) { - api.draw(); - } - return 0; - }; - - - /** - * Provide a common method for plug-ins to check the version of DataTables being used, in order - * to ensure compatibility. - * @param {string} sVersion Version string to check for, in the format "X.Y.Z". Note that the - * formats "X" and "X.Y" are also acceptable. - * @returns {boolean} true if this version of DataTables is greater or equal to the required - * version, or false if this version of DataTales is not suitable - * @method - * @dtopt API - * @deprecated Since v1.10 - * - * @example - * $(document).ready(function() { - * var oTable = $('#example').dataTable(); - * alert( oTable.fnVersionCheck( '1.9.0' ) ); - * } ); - */ - this.fnVersionCheck = _ext.fnVersionCheck; - - - var _that = this; - var emptyInit = options === undefined; - var len = this.length; - - if ( emptyInit ) { - options = {}; - } - - this.oApi = this.internal = _ext.internal; - - // Extend with old style plug-in API methods - for ( var fn in DataTable.ext.internal ) { - if ( fn ) { - this[fn] = _fnExternApiFunc(fn); - } - } - - this.each(function() { - // For each initialisation we want to give it a clean initialisation - // object that can be bashed around - var o = {}; - var oInit = len > 1 ? // optimisation for single table case - _fnExtend( o, options, true ) : - options; - - /*global oInit,_that,emptyInit*/ - var i=0, iLen, j, jLen, k, kLen; - var sId = this.getAttribute( 'id' ); - var bInitHandedOff = false; - var defaults = DataTable.defaults; - var $this = $(this); - - - /* Sanity check */ - if ( this.nodeName.toLowerCase() != 'table' ) - { - _fnLog( null, 0, 'Non-table node initialisation ('+this.nodeName+')', 2 ); - return; - } - - /* Backwards compatibility for the defaults */ - _fnCompatOpts( defaults ); - _fnCompatCols( defaults.column ); - - /* Convert the camel-case defaults to Hungarian */ - _fnCamelToHungarian( defaults, defaults, true ); - _fnCamelToHungarian( defaults.column, defaults.column, true ); - - /* Setting up the initialisation object */ - _fnCamelToHungarian( defaults, $.extend( oInit, $this.data() ) ); - - - - /* Check to see if we are re-initialising a table */ - var allSettings = DataTable.settings; - for ( i=0, iLen=allSettings.length ; i').appendTo($this); - } - oSettings.nTHead = thead[0]; - - var tbody = $this.children('tbody'); - if ( tbody.length === 0 ) { - tbody = $('').appendTo($this); - } - oSettings.nTBody = tbody[0]; - - var tfoot = $this.children('tfoot'); - if ( tfoot.length === 0 && captions.length > 0 && (oSettings.oScroll.sX !== "" || oSettings.oScroll.sY !== "") ) { - // If we are a scrolling table, and no footer has been given, then we need to create - // a tfoot element for the caption element to be appended to - tfoot = $('').appendTo($this); - } - - if ( tfoot.length === 0 || tfoot.children().length === 0 ) { - $this.addClass( oClasses.sNoFooter ); - } - else if ( tfoot.length > 0 ) { - oSettings.nTFoot = tfoot[0]; - _fnDetectHeader( oSettings.aoFooter, oSettings.nTFoot ); - } - - /* Check if there is data passing into the constructor */ - if ( oInit.aaData ) { - for ( i=0 ; i')[0]; var __filter_div_textContent = __filter_div.textContent !== undefined; @@ -4806,13 +3508,13 @@ // reference is broken by the use of outerHTML $('select', div) .val( settings._iDisplayLength ) - .on( 'change.DT', function(e) { + .bind( 'change.DT', function(e) { _fnLengthChange( settings, $(this).val() ); _fnDraw( settings ); } ); // Update node value whenever anything changes the table's length - $(settings.nTable).on( 'length.dt.DT', function (e, s, len) { + $(settings.nTable).bind( 'length.dt.DT', function (e, s, len) { if ( settings === s ) { $('select', div).val( len ); } @@ -5677,7 +4379,7 @@ if ( (tableWidthAttr || scrollX) && ! oSettings._reszEvt ) { var bindResize = function () { - $(window).on('resize.DT-'+oSettings.sInstance, _fnThrottle( function () { + $(window).bind('resize.DT-'+oSettings.sInstance, _fnThrottle( function () { _fnAdjustColumnSizing( oSettings ); } ) ); }; @@ -5704,7 +4406,32 @@ * @returns {function} wrapped function * @memberof DataTable#oApi */ - var _fnThrottle = DataTable.util.throttle; + function _fnThrottle( fn, freq ) { + var + frequency = freq !== undefined ? freq : 200, + last, + timer; + + return function () { + var + that = this, + now = +new Date(), + args = arguments; + + if ( last && now < last + frequency ) { + clearTimeout( timer ); + + timer = setTimeout( function () { + last = undefined; + fn.apply( that, args ); + }, frequency ); + } + else { + last = now; + fn.apply( that, args ); + } + }; + } /** @@ -6288,102 +5015,86 @@ * Attempt to load a saved table state * @param {object} oSettings dataTables settings object * @param {object} oInit DataTables init object so we can override settings - * @param {function} callback Callback to execute when the state has been loaded * @memberof DataTable#oApi */ - function _fnLoadState ( settings, oInit, callback ) + function _fnLoadState ( settings, oInit ) { var i, ien; var columns = settings.aoColumns; - var loaded = function ( s ) { - if ( ! s || ! s.time ) { - callback(); - return; - } - - // Allow custom and plug-in manipulation functions to alter the saved data set and - // cancelling of loading by returning false - var abStateLoad = _fnCallbackFire( settings, 'aoStateLoadParams', 'stateLoadParams', [settings, state] ); - if ( $.inArray( false, abStateLoad ) !== -1 ) { - callback(); - return; - } - - // Reject old data - var duration = settings.iStateDuration; - if ( duration > 0 && s.time < +new Date() - (duration*1000) ) { - callback(); - return; - } - - // Number of columns have changed - all bets are off, no restore of settings - if ( s.columns && columns.length !== s.columns.length ) { - callback(); - return; - } - - // Store the saved state so it might be accessed at any time - settings.oLoadedState = $.extend( true, {}, state ); - - // Restore key features - todo - for 1.11 this needs to be done by - // subscribed events - if ( s.start !== undefined ) { - settings._iDisplayStart = s.start; - settings.iInitDisplayStart = s.start; - } - if ( s.length !== undefined ) { - settings._iDisplayLength = s.length; - } - - // Order - if ( s.order !== undefined ) { - settings.aaSorting = []; - $.each( s.order, function ( i, col ) { - settings.aaSorting.push( col[0] >= columns.length ? - [ 0, col[1] ] : - col - ); - } ); - } - - // Search - if ( s.search !== undefined ) { - $.extend( settings.oPreviousSearch, _fnSearchToHung( s.search ) ); - } - - // Columns - // - if ( s.columns ) { - for ( i=0, ien=s.columns.length ; i 0 && state.time < +new Date() - (duration*1000) ) { + return; + } + + // Number of columns have changed - all bets are off, no restore of settings + if ( columns.length !== state.columns.length ) { + return; + } + + // Store the saved state so it might be accessed at any time + settings.oLoadedState = $.extend( true, {}, state ); + + // Restore key features - todo - for 1.11 this needs to be done by + // subscribed events + if ( state.start !== undefined ) { + settings._iDisplayStart = state.start; + settings.iInitDisplayStart = state.start; + } + if ( state.length !== undefined ) { + settings._iDisplayLength = state.length; + } + + // Order + if ( state.order !== undefined ) { + settings.aaSorting = []; + $.each( state.order, function ( i, col ) { + settings.aaSorting.push( col[0] >= columns.length ? + [ 0, col[1] ] : + col + ); + } ); + } + + // Search + if ( state.search !== undefined ) { + $.extend( settings.oPreviousSearch, _fnSearchToHung( state.search ) ); + } + + // Columns + for ( i=0, ien=state.columns.length ; i + *
  • 1D array of data - add a single row with the data provided
    • + *
  • 2D array of arrays - add multiple rows in a single call
    • + *
  • object - data object when using mData
    • + *
  • array of objects - multiple data objects when using mData
    • + *
+ * @param {bool} [redraw=true] redraw the table or not + * @returns {array} An array of integers, representing the list of indexes in + * aoData ({@link DataTable.models.oSettings}) that have been added to + * the table. + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * // Global var for counter + * var giCount = 2; + * + * $(document).ready(function() { + * $('#example').dataTable(); + * } ); + * + * function fnClickAddRow() { + * $('#example').dataTable().fnAddData( [ + * giCount+".1", + * giCount+".2", + * giCount+".3", + * giCount+".4" ] + * ); + * + * giCount++; + * } + */ + this.fnAddData = function( data, redraw ) + { + var api = this.api( true ); + + /* Check if we want to add multiple rows or not */ + var rows = $.isArray(data) && ( $.isArray(data[0]) || $.isPlainObject(data[0]) ) ? + api.rows.add( data ) : + api.row.add( data ); + + if ( redraw === undefined || redraw ) { + api.draw(); + } + + return rows.flatten().toArray(); + }; + + + /** + * This function will make DataTables recalculate the column sizes, based on the data + * contained in the table and the sizes applied to the columns (in the DOM, CSS or + * through the sWidth parameter). This can be useful when the width of the table's + * parent element changes (for example a window resize). + * @param {boolean} [bRedraw=true] Redraw the table or not, you will typically want to + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable( { + * "sScrollY": "200px", + * "bPaginate": false + * } ); + * + * $(window).bind('resize', function () { + * oTable.fnAdjustColumnSizing(); + * } ); + * } ); + */ + this.fnAdjustColumnSizing = function ( bRedraw ) + { + var api = this.api( true ).columns.adjust(); + var settings = api.settings()[0]; + var scroll = settings.oScroll; + + if ( bRedraw === undefined || bRedraw ) { + api.draw( false ); + } + else if ( scroll.sX !== "" || scroll.sY !== "" ) { + /* If not redrawing, but scrolling, we want to apply the new column sizes anyway */ + _fnScrollDraw( settings ); + } + }; + + + /** + * Quickly and simply clear a table + * @param {bool} [bRedraw=true] redraw the table or not + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable(); + * + * // Immediately 'nuke' the current rows (perhaps waiting for an Ajax callback...) + * oTable.fnClearTable(); + * } ); + */ + this.fnClearTable = function( bRedraw ) + { + var api = this.api( true ).clear(); + + if ( bRedraw === undefined || bRedraw ) { + api.draw(); + } + }; + + + /** + * The exact opposite of 'opening' a row, this function will close any rows which + * are currently 'open'. + * @param {node} nTr the table row to 'close' + * @returns {int} 0 on success, or 1 if failed (can't find the row) + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable; + * + * // 'open' an information row when a row is clicked on + * $('#example tbody tr').click( function () { + * if ( oTable.fnIsOpen(this) ) { + * oTable.fnClose( this ); + * } else { + * oTable.fnOpen( this, "Temporary row opened", "info_row" ); + * } + * } ); + * + * oTable = $('#example').dataTable(); + * } ); + */ + this.fnClose = function( nTr ) + { + this.api( true ).row( nTr ).child.hide(); + }; + + + /** + * Remove a row for the table + * @param {mixed} target The index of the row from aoData to be deleted, or + * the TR element you want to delete + * @param {function|null} [callBack] Callback function + * @param {bool} [redraw=true] Redraw the table or not + * @returns {array} The row that was deleted + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable(); + * + * // Immediately remove the first row + * oTable.fnDeleteRow( 0 ); + * } ); + */ + this.fnDeleteRow = function( target, callback, redraw ) + { + var api = this.api( true ); + var rows = api.rows( target ); + var settings = rows.settings()[0]; + var data = settings.aoData[ rows[0][0] ]; + + rows.remove(); + + if ( callback ) { + callback.call( this, settings, data ); + } + + if ( redraw === undefined || redraw ) { + api.draw(); + } + + return data; + }; + + + /** + * Restore the table to it's original state in the DOM by removing all of DataTables + * enhancements, alterations to the DOM structure of the table and event listeners. + * @param {boolean} [remove=false] Completely remove the table from the DOM + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * // This example is fairly pointless in reality, but shows how fnDestroy can be used + * var oTable = $('#example').dataTable(); + * oTable.fnDestroy(); + * } ); + */ + this.fnDestroy = function ( remove ) + { + this.api( true ).destroy( remove ); + }; + + + /** + * Redraw the table + * @param {bool} [complete=true] Re-filter and resort (if enabled) the table before the draw. + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable(); + * + * // Re-draw the table - you wouldn't want to do it here, but it's an example :-) + * oTable.fnDraw(); + * } ); + */ + this.fnDraw = function( complete ) + { + // Note that this isn't an exact match to the old call to _fnDraw - it takes + // into account the new data, but can hold position. + this.api( true ).draw( complete ); + }; + + + /** + * Filter the input based on data + * @param {string} sInput String to filter the table on + * @param {int|null} [iColumn] Column to limit filtering to + * @param {bool} [bRegex=false] Treat as regular expression or not + * @param {bool} [bSmart=true] Perform smart filtering or not + * @param {bool} [bShowGlobal=true] Show the input global filter in it's input box(es) + * @param {bool} [bCaseInsensitive=true] Do case-insensitive matching (true) or not (false) + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable(); + * + * // Sometime later - filter... + * oTable.fnFilter( 'test string' ); + * } ); + */ + this.fnFilter = function( sInput, iColumn, bRegex, bSmart, bShowGlobal, bCaseInsensitive ) + { + var api = this.api( true ); + + if ( iColumn === null || iColumn === undefined ) { + api.search( sInput, bRegex, bSmart, bCaseInsensitive ); + } + else { + api.column( iColumn ).search( sInput, bRegex, bSmart, bCaseInsensitive ); + } + + api.draw(); + }; + + + /** + * Get the data for the whole table, an individual row or an individual cell based on the + * provided parameters. + * @param {int|node} [src] A TR row node, TD/TH cell node or an integer. If given as + * a TR node then the data source for the whole row will be returned. If given as a + * TD/TH cell node then iCol will be automatically calculated and the data for the + * cell returned. If given as an integer, then this is treated as the aoData internal + * data index for the row (see fnGetPosition) and the data for that row used. + * @param {int} [col] Optional column index that you want the data of. + * @returns {array|object|string} If mRow is undefined, then the data for all rows is + * returned. If mRow is defined, just data for that row, and is iCol is + * defined, only data for the designated cell is returned. + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * // Row data + * $(document).ready(function() { + * oTable = $('#example').dataTable(); + * + * oTable.$('tr').click( function () { + * var data = oTable.fnGetData( this ); + * // ... do something with the array / object of data for the row + * } ); + * } ); + * + * @example + * // Individual cell data + * $(document).ready(function() { + * oTable = $('#example').dataTable(); + * + * oTable.$('td').click( function () { + * var sData = oTable.fnGetData( this ); + * alert( 'The cell clicked on had the value of '+sData ); + * } ); + * } ); + */ + this.fnGetData = function( src, col ) + { + var api = this.api( true ); + + if ( src !== undefined ) { + var type = src.nodeName ? src.nodeName.toLowerCase() : ''; + + return col !== undefined || type == 'td' || type == 'th' ? + api.cell( src, col ).data() : + api.row( src ).data() || null; + } + + return api.data().toArray(); + }; + + + /** + * Get an array of the TR nodes that are used in the table's body. Note that you will + * typically want to use the '$' API method in preference to this as it is more + * flexible. + * @param {int} [iRow] Optional row index for the TR element you want + * @returns {array|node} If iRow is undefined, returns an array of all TR elements + * in the table's body, or iRow is defined, just the TR element requested. + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable(); + * + * // Get the nodes from the table + * var nNodes = oTable.fnGetNodes( ); + * } ); + */ + this.fnGetNodes = function( iRow ) + { + var api = this.api( true ); + + return iRow !== undefined ? + api.row( iRow ).node() : + api.rows().nodes().flatten().toArray(); + }; + + + /** + * Get the array indexes of a particular cell from it's DOM element + * and column index including hidden columns + * @param {node} node this can either be a TR, TD or TH in the table's body + * @returns {int} If nNode is given as a TR, then a single index is returned, or + * if given as a cell, an array of [row index, column index (visible), + * column index (all)] is given. + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * $('#example tbody td').click( function () { + * // Get the position of the current data from the node + * var aPos = oTable.fnGetPosition( this ); + * + * // Get the data array for this row + * var aData = oTable.fnGetData( aPos[0] ); + * + * // Update the data array and return the value + * aData[ aPos[1] ] = 'clicked'; + * this.innerHTML = 'clicked'; + * } ); + * + * // Init DataTables + * oTable = $('#example').dataTable(); + * } ); + */ + this.fnGetPosition = function( node ) + { + var api = this.api( true ); + var nodeName = node.nodeName.toUpperCase(); + + if ( nodeName == 'TR' ) { + return api.row( node ).index(); + } + else if ( nodeName == 'TD' || nodeName == 'TH' ) { + var cell = api.cell( node ).index(); + + return [ + cell.row, + cell.columnVisible, + cell.column + ]; + } + return null; + }; + + + /** + * Check to see if a row is 'open' or not. + * @param {node} nTr the table row to check + * @returns {boolean} true if the row is currently open, false otherwise + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable; + * + * // 'open' an information row when a row is clicked on + * $('#example tbody tr').click( function () { + * if ( oTable.fnIsOpen(this) ) { + * oTable.fnClose( this ); + * } else { + * oTable.fnOpen( this, "Temporary row opened", "info_row" ); + * } + * } ); + * + * oTable = $('#example').dataTable(); + * } ); + */ + this.fnIsOpen = function( nTr ) + { + return this.api( true ).row( nTr ).child.isShown(); + }; + + + /** + * This function will place a new row directly after a row which is currently + * on display on the page, with the HTML contents that is passed into the + * function. This can be used, for example, to ask for confirmation that a + * particular record should be deleted. + * @param {node} nTr The table row to 'open' + * @param {string|node|jQuery} mHtml The HTML to put into the row + * @param {string} sClass Class to give the new TD cell + * @returns {node} The row opened. Note that if the table row passed in as the + * first parameter, is not found in the table, this method will silently + * return. + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable; + * + * // 'open' an information row when a row is clicked on + * $('#example tbody tr').click( function () { + * if ( oTable.fnIsOpen(this) ) { + * oTable.fnClose( this ); + * } else { + * oTable.fnOpen( this, "Temporary row opened", "info_row" ); + * } + * } ); + * + * oTable = $('#example').dataTable(); + * } ); + */ + this.fnOpen = function( nTr, mHtml, sClass ) + { + return this.api( true ) + .row( nTr ) + .child( mHtml, sClass ) + .show() + .child()[0]; + }; + + + /** + * Change the pagination - provides the internal logic for pagination in a simple API + * function. With this function you can have a DataTables table go to the next, + * previous, first or last pages. + * @param {string|int} mAction Paging action to take: "first", "previous", "next" or "last" + * or page number to jump to (integer), note that page 0 is the first page. + * @param {bool} [bRedraw=true] Redraw the table or not + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable(); + * oTable.fnPageChange( 'next' ); + * } ); + */ + this.fnPageChange = function ( mAction, bRedraw ) + { + var api = this.api( true ).page( mAction ); + + if ( bRedraw === undefined || bRedraw ) { + api.draw(false); + } + }; + + + /** + * Show a particular column + * @param {int} iCol The column whose display should be changed + * @param {bool} bShow Show (true) or hide (false) the column + * @param {bool} [bRedraw=true] Redraw the table or not + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable(); + * + * // Hide the second column after initialisation + * oTable.fnSetColumnVis( 1, false ); + * } ); + */ + this.fnSetColumnVis = function ( iCol, bShow, bRedraw ) + { + var api = this.api( true ).column( iCol ).visible( bShow ); + + if ( bRedraw === undefined || bRedraw ) { + api.columns.adjust().draw(); + } + }; + + + /** + * Get the settings for a particular table for external manipulation + * @returns {object} DataTables settings object. See + * {@link DataTable.models.oSettings} + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable(); + * var oSettings = oTable.fnSettings(); + * + * // Show an example parameter from the settings + * alert( oSettings._iDisplayStart ); + * } ); + */ + this.fnSettings = function() + { + return _fnSettingsFromNode( this[_ext.iApiIndex] ); + }; + + + /** + * Sort the table by a particular column + * @param {int} iCol the data index to sort on. Note that this will not match the + * 'display index' if you have hidden data entries + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable(); + * + * // Sort immediately with columns 0 and 1 + * oTable.fnSort( [ [0,'asc'], [1,'asc'] ] ); + * } ); + */ + this.fnSort = function( aaSort ) + { + this.api( true ).order( aaSort ).draw(); + }; + + + /** + * Attach a sort listener to an element for a given column + * @param {node} nNode the element to attach the sort listener to + * @param {int} iColumn the column that a click on this node will sort on + * @param {function} [fnCallback] callback function when sort is run + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable(); + * + * // Sort on column 1, when 'sorter' is clicked on + * oTable.fnSortListener( document.getElementById('sorter'), 1 ); + * } ); + */ + this.fnSortListener = function( nNode, iColumn, fnCallback ) + { + this.api( true ).order.listener( nNode, iColumn, fnCallback ); + }; + + + /** + * Update a table cell or row - this method will accept either a single value to + * update the cell with, an array of values with one element for each column or + * an object in the same format as the original data source. The function is + * self-referencing in order to make the multi column updates easier. + * @param {object|array|string} mData Data to update the cell/row with + * @param {node|int} mRow TR element you want to update or the aoData index + * @param {int} [iColumn] The column to update, give as null or undefined to + * update a whole row. + * @param {bool} [bRedraw=true] Redraw the table or not + * @param {bool} [bAction=true] Perform pre-draw actions or not + * @returns {int} 0 on success, 1 on error + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable(); + * oTable.fnUpdate( 'Example update', 0, 0 ); // Single cell + * oTable.fnUpdate( ['a', 'b', 'c', 'd', 'e'], $('tbody tr')[0] ); // Row + * } ); + */ + this.fnUpdate = function( mData, mRow, iColumn, bRedraw, bAction ) + { + var api = this.api( true ); + + if ( iColumn === undefined || iColumn === null ) { + api.row( mRow ).data( mData ); + } + else { + api.cell( mRow, iColumn ).data( mData ); + } + + if ( bAction === undefined || bAction ) { + api.columns.adjust(); + } + + if ( bRedraw === undefined || bRedraw ) { + api.draw(); + } + return 0; + }; + + + /** + * Provide a common method for plug-ins to check the version of DataTables being used, in order + * to ensure compatibility. + * @param {string} sVersion Version string to check for, in the format "X.Y.Z". Note that the + * formats "X" and "X.Y" are also acceptable. + * @returns {boolean} true if this version of DataTables is greater or equal to the required + * version, or false if this version of DataTales is not suitable + * @method + * @dtopt API + * @deprecated Since v1.10 + * + * @example + * $(document).ready(function() { + * var oTable = $('#example').dataTable(); + * alert( oTable.fnVersionCheck( '1.9.0' ) ); + * } ); + */ + this.fnVersionCheck = _ext.fnVersionCheck; + + + var _that = this; + var emptyInit = options === undefined; + var len = this.length; + + if ( emptyInit ) { + options = {}; + } + + this.oApi = this.internal = _ext.internal; + + // Extend with old style plug-in API methods + for ( var fn in DataTable.ext.internal ) { + if ( fn ) { + this[fn] = _fnExternApiFunc(fn); + } + } + + this.each(function() { + // For each initialisation we want to give it a clean initialisation + // object that can be bashed around + var o = {}; + var oInit = len > 1 ? // optimisation for single table case + _fnExtend( o, options, true ) : + options; + + /*global oInit,_that,emptyInit*/ + var i=0, iLen, j, jLen, k, kLen; + var sId = this.getAttribute( 'id' ); + var bInitHandedOff = false; + var defaults = DataTable.defaults; + var $this = $(this); + + + /* Sanity check */ + if ( this.nodeName.toLowerCase() != 'table' ) + { + _fnLog( null, 0, 'Non-table node initialisation ('+this.nodeName+')', 2 ); + return; + } + + /* Backwards compatibility for the defaults */ + _fnCompatOpts( defaults ); + _fnCompatCols( defaults.column ); + + /* Convert the camel-case defaults to Hungarian */ + _fnCamelToHungarian( defaults, defaults, true ); + _fnCamelToHungarian( defaults.column, defaults.column, true ); + + /* Setting up the initialisation object */ + _fnCamelToHungarian( defaults, $.extend( oInit, $this.data() ) ); + + + + /* Check to see if we are re-initialising a table */ + var allSettings = DataTable.settings; + for ( i=0, iLen=allSettings.length ; i').appendTo(this); + } + oSettings.nTHead = thead[0]; + + var tbody = $this.children('tbody'); + if ( tbody.length === 0 ) + { + tbody = $('').appendTo(this); + } + oSettings.nTBody = tbody[0]; + + var tfoot = $this.children('tfoot'); + if ( tfoot.length === 0 && captions.length > 0 && (oSettings.oScroll.sX !== "" || oSettings.oScroll.sY !== "") ) + { + // If we are a scrolling table, and no footer has been given, then we need to create + // a tfoot element for the caption element to be appended to + tfoot = $('').appendTo(this); + } + + if ( tfoot.length === 0 || tfoot.children().length === 0 ) { + $this.addClass( oClasses.sNoFooter ); + } + else if ( tfoot.length > 0 ) { + oSettings.nTFoot = tfoot[0]; + _fnDetectHeader( oSettings.aoFooter, oSettings.nTFoot ); + } + + /* Check if there is data passing into the constructor */ + if ( oInit.aaData ) + { + for ( i=0 ; i= 0 ? @@ -8385,7 +8344,7 @@ columns.length + selInt // Count from right (+ because its a negative value) ]; } - + // Selector = function if ( typeof s === 'function' ) { var rows = _selector_row_indexes( settings, opts ); @@ -8460,7 +8419,7 @@ }; - var __setColumnVis = function ( settings, column, vis ) { + var __setColumnVis = function ( settings, column, vis, recalc ) { var cols = settings.aoColumns, col = cols[ column ], @@ -8503,6 +8462,13 @@ _fnDrawHead( settings, settings.aoHeader ); _fnDrawHead( settings, settings.aoFooter ); + if ( recalc === undefined || recalc ) { + // Automatically adjust column sizing + _fnAdjustColumnSizing( settings ); + } + + _fnCallbackFire( settings, null, 'column-visibility', [settings, column, vis, recalc] ); + _fnSaveState( settings ); }; @@ -8567,26 +8533,12 @@ } ); _api_registerPlural( 'columns().visible()', 'column().visible()', function ( vis, calc ) { - var ret = this.iterator( 'column', function ( settings, column ) { + return this.iterator( 'column', function ( settings, column ) { if ( vis === undefined ) { return settings.aoColumns[ column ].bVisible; } // else - __setColumnVis( settings, column, vis ); + __setColumnVis( settings, column, vis, calc ); } ); - - // Group the column visibility changes - if ( vis !== undefined ) { - // Second loop once the first is done for events - this.iterator( 'column', function ( settings, column ) { - _fnCallbackFire( settings, null, 'column-visibility', [settings, column, vis, calc] ); - } ); - - if ( calc === undefined || calc ) { - this.columns.adjust(); - } - } - - return ret; } ); _api_registerPlural( 'columns().indexes()', 'column().index()', function ( type ) { @@ -8622,6 +8574,7 @@ + var __cell_selector = function ( settings, selector, opts ) { var data = settings.aoData; @@ -8882,7 +8835,7 @@ // Simple column / direction passed in order = [ [ order, dir ] ]; } - else if ( order.length && ! $.isArray( order[0] ) ) { + else if ( ! $.isArray( order[0] ) ) { // Arguments passed in (list of 1D arrays) order = Array.prototype.slice.call( arguments ); } @@ -9096,10 +9049,6 @@ var t = $(table).get(0); var is = false; - if ( table instanceof DataTable.Api ) { - return true; - } - $.each( DataTable.settings, function (i, o) { var head = o.nScrollHead ? $('table', o.nScrollHead)[0] : null; var foot = o.nScrollFoot ? $('table', o.nScrollFoot)[0] : null; @@ -9150,6 +9099,38 @@ }; + /** + * DataTables utility methods + * + * This namespace provides helper methods that DataTables uses internally to + * create a DataTable, but which are not exclusively used only for DataTables. + * These methods can be used by extension authors to save the duplication of + * code. + * + * @namespace + */ + DataTable.util = { + /** + * Throttle the calls to a function. Arguments and context are maintained + * for the throttled function. + * + * @param {function} fn Function to be called + * @param {integer} freq Call frequency in mS + * @return {function} Wrapped function + */ + throttle: _fnThrottle, + + + /** + * Escape a string such that it can be used in a regular expression + * + * @param {string} sVal string to escape + * @returns {string} escaped string + */ + escapeRegex: _fnEscapeRegex + }; + + /** * Convert from camel case parameters to Hungarian notation. This is made public * for the extensions to provide the same ability as DataTables core to accept @@ -9255,8 +9236,8 @@ // Blitz all `DT` namespaced events (these are internal events, the // lowercase, `dt` events are user subscribed and they are responsible // for removing them - jqWrapper.off('.DT').find(':not(tbody *)').off('.DT'); - $(window).off('.DT-'+settings.sInstance); + jqWrapper.unbind('.DT').find(':not(tbody *)').unbind('.DT'); + $(window).unbind('.DT-'+settings.sInstance); // When scrolling we had to break the table up - restore it if ( table != thead.parentNode ) { @@ -9386,7 +9367,7 @@ * @type string * @default Version number */ - DataTable.version = "1.10.13-dev"; + DataTable.version = "1.10.12-dev"; /** * Private data store, containing all of the settings objects that are @@ -10894,8 +10875,6 @@ * @type function * @member * @param {object} settings DataTables settings object - * @param {object} callback Callback that can be executed when done. It - * should be passed the loaded state object. * @return {object} The DataTables state object to be loaded * * @dtopt Callbacks @@ -10905,14 +10884,21 @@ * $(document).ready( function() { * $('#example').dataTable( { * "stateSave": true, - * "stateLoadCallback": function (settings, callback) { + * "stateLoadCallback": function (settings) { + * var o; + * + * // Send an Ajax request to the server to get the data. Note that + * // this is a synchronous request. * $.ajax( { * "url": "/state_load", + * "async": false, * "dataType": "json", * "success": function (json) { - * callback( json ); + * o = json; * } * } ); + * + * return o; * } * } ); * } ); @@ -14781,7 +14767,7 @@ $.extend( _ext.type.order, { // Dates "date-pre": function ( d ) { - return Date.parse( d ) || -Infinity; + return Date.parse( d ) || 0; }, // html @@ -14952,7 +14938,6 @@ return __htmlEscapeEntities( d ); } - flo = flo.toFixed( precision ); d = Math.abs( flo ); var intPart = parseInt( d, 10 ); diff --git a/media/js/jquery.dataTables.min.js b/media/js/jquery.dataTables.min.js index 6526d2e5..1bba1d4d 100644 --- a/media/js/jquery.dataTables.min.js +++ b/media/js/jquery.dataTables.min.js @@ -1,166 +1,166 @@ /*! - DataTables 1.10.13-dev + DataTables 1.10.12-dev ©2008-2015 SpryMedia Ltd - datatables.net/license */ -(function(h){"function"===typeof define&&define.amd?define(["jquery"],function(E){return h(E,window,document)}):"object"===typeof exports?module.exports=function(E,H){E||(E=window);H||(H="undefined"!==typeof window?require("jquery"):require("jquery")(E));return h(H,E,E.document)}:h(jQuery,window,document)})(function(h,E,H,k){function Y(a){var b,c,d={};h.each(a,function(e){if((b=e.match(/^([^A-Z]+?)([A-Z])/))&&-1!=="a aa ai ao as b fn i m o s ".indexOf(b[1]+" "))c=e.replace(b[0],b[2].toLowerCase()), -d[c]=e,"o"===b[1]&&Y(a[e])});a._hungarianMap=d}function J(a,b,c){a._hungarianMap||Y(a);var d;h.each(b,function(e){d=a._hungarianMap[e];if(d!==k&&(c||b[d]===k))"o"===d.charAt(0)?(b[d]||(b[d]={}),h.extend(!0,b[d],b[e]),J(a[d],b[d],c)):b[d]=b[e]})}function Fa(a){var b=m.defaults.oLanguage,c=a.sZeroRecords;!a.sEmptyTable&&(c&&"No data available in table"===b.sEmptyTable)&&F(a,a,"sZeroRecords","sEmptyTable");!a.sLoadingRecords&&(c&&"Loading..."===b.sLoadingRecords)&&F(a,a,"sZeroRecords","sLoadingRecords"); -a.sInfoThousands&&(a.sThousands=a.sInfoThousands);(a=a.sDecimal)&&fb(a)}function gb(a){A(a,"ordering","bSort");A(a,"orderMulti","bSortMulti");A(a,"orderClasses","bSortClasses");A(a,"orderCellsTop","bSortCellsTop");A(a,"order","aaSorting");A(a,"orderFixed","aaSortingFixed");A(a,"paging","bPaginate");A(a,"pagingType","sPaginationType");A(a,"pageLength","iDisplayLength");A(a,"searching","bFilter");"boolean"===typeof a.sScrollX&&(a.sScrollX=a.sScrollX?"100%":"");"boolean"===typeof a.scrollX&&(a.scrollX= -a.scrollX?"100%":"");if(a=a.aoSearchCols)for(var b=0,c=a.length;b").css({position:"fixed",top:0,left:-1*h(E).scrollLeft(),height:1,width:1,overflow:"hidden"}).append(h("
").css({position:"absolute", -top:1,left:1,width:100,overflow:"scroll"}).append(h("
").css({width:"100%",height:10}))).appendTo("body"),d=c.children(),e=d.children();b.barWidth=d[0].offsetWidth-d[0].clientWidth;b.bScrollOversize=100===e[0].offsetWidth&&100!==d[0].clientWidth;b.bScrollbarLeft=1!==Math.round(e.offset().left);b.bBounding=c[0].getBoundingClientRect().width?!0:!1;c.remove()}h.extend(a.oBrowser,m.__browser);a.oScroll.iBarWidth=m.__browser.barWidth}function jb(a,b,c,d,e,f){var g,j=!1;c!==k&&(g=c,j=!0);for(;d!== -e;)a.hasOwnProperty(d)&&(g=j?b(g,a[d],d,a):a[d],j=!0,d+=f);return g}function Ga(a,b){var c=m.defaults.column,d=a.aoColumns.length,c=h.extend({},m.models.oColumn,c,{nTh:b?b:H.createElement("th"),sTitle:c.sTitle?c.sTitle:b?b.innerHTML:"",aDataSort:c.aDataSort?c.aDataSort:[d],mData:c.mData?c.mData:d,idx:d});a.aoColumns.push(c);c=a.aoPreSearchCols;c[d]=h.extend({},m.models.oSearch,c[d]);ka(a,d,h(b).data())}function ka(a,b,c){var b=a.aoColumns[b],d=a.oClasses,e=h(b.nTh);if(!b.sWidthOrig){b.sWidthOrig= -e.attr("width")||null;var f=(e.attr("style")||"").match(/width:\s*(\d+[pxem%]+)/);f&&(b.sWidthOrig=f[1])}c!==k&&null!==c&&(hb(c),J(m.defaults.column,c),c.mDataProp!==k&&!c.mData&&(c.mData=c.mDataProp),c.sType&&(b._sManualType=c.sType),c.className&&!c.sClass&&(c.sClass=c.className),h.extend(b,c),F(b,c,"sWidth","sWidthOrig"),c.iDataSort!==k&&(b.aDataSort=[c.iDataSort]),F(b,c,"aDataSort"));var g=b.mData,j=R(g),i=b.mRender?R(b.mRender):null,c=function(a){return"string"===typeof a&&-1!==a.indexOf("@")}; -b._bAttrSrc=h.isPlainObject(g)&&(c(g.sort)||c(g.type)||c(g.filter));b._setter=null;b.fnGetData=function(a,b,c){var d=j(a,b,k,c);return i&&b?i(d,b,a,c):d};b.fnSetData=function(a,b,c){return S(g)(a,b,c)};"number"!==typeof g&&(a._rowReadObject=!0);a.oFeatures.bSort||(b.bSortable=!1,e.addClass(d.sSortableNone));a=-1!==h.inArray("asc",b.asSorting);c=-1!==h.inArray("desc",b.asSorting);!b.bSortable||!a&&!c?(b.sSortingClass=d.sSortableNone,b.sSortingClassJUI=""):a&&!c?(b.sSortingClass=d.sSortableAsc,b.sSortingClassJUI= -d.sSortJUIAscAllowed):!a&&c?(b.sSortingClass=d.sSortableDesc,b.sSortingClassJUI=d.sSortJUIDescAllowed):(b.sSortingClass=d.sSortable,b.sSortingClassJUI=d.sSortJUI)}function Z(a){if(!1!==a.oFeatures.bAutoWidth){var b=a.aoColumns;Ha(a);for(var c=0,d=b.length;cq[f])d(l.length+q[f],n);else if("string"===typeof q[f]){j=0;for(i=l.length;jb&&a[e]--; -1!=d&&c===k&&a.splice(d,1)}function da(a,b,c,d){var e=a.aoData[b],f,g=function(c,d){for(;c.childNodes.length;)c.removeChild(c.firstChild); -c.innerHTML=B(a,b,d,"display")};if("dom"===c||(!c||"auto"===c)&&"dom"===e.src)e._aData=Ka(a,e,d,d===k?k:e._aData).data;else{var j=e.anCells;if(j)if(d!==k)g(j[d],d);else{c=0;for(f=j.length;c").appendTo(g));b=0;for(c=l.length;btr").attr("role","row");h(g).find(">tr>th, >tr>td").addClass(n.sHeaderTH);h(j).find(">tr>th, >tr>td").addClass(n.sFooterTH); -if(null!==j){a=a.aoFooter[0];b=0;for(c=a.length;b=a.fnRecordsDisplay()?0:g,a.iInitDisplayStart= --1);var g=a._iDisplayStart,n=a.fnDisplayEnd();if(a.bDeferLoading)a.bDeferLoading=!1,a.iDraw++,C(a,!1);else if(j){if(!a.bDestroying&&!nb(a))return}else a.iDraw++;if(0!==i.length){f=j?a.aoData.length:n;for(j=j?0:g;j",{"class":e?d[0]:""}).append(h("",{valign:"top",colSpan:ba(a),"class":a.oClasses.sRowEmpty}).html(c))[0];v(a,"aoHeaderCallback","header",[h(a.nTHead).children("tr")[0],Ma(a),g,n,i]);v(a,"aoFooterCallback","footer",[h(a.nTFoot).children("tr")[0],Ma(a),g,n,i]);d=h(a.nTBody);d.children().detach();d.append(h(b));v(a,"aoDrawCallback","draw",[a]);a.bSorted=!1;a.bFiltered=!1;a.bDrawing=!1}}function T(a,b){var c=a.oFeatures,d=c.bFilter; -c.bSort&&ob(a);d?ga(a,a.oPreviousSearch):a.aiDisplay=a.aiDisplayMaster.slice();!0!==b&&(a._iDisplayStart=0);a._drawHold=b;O(a);a._drawHold=!1}function pb(a){var b=a.oClasses,c=h(a.nTable),c=h("
").insertBefore(c),d=a.oFeatures,e=h("
",{id:a.sTableId+"_wrapper","class":b.sWrapper+(a.nTFoot?"":" "+b.sNoFooter)});a.nHolding=c[0];a.nTableWrapper=e[0];a.nTableReinsertBefore=a.nTable.nextSibling;for(var f=a.sDom.split(""),g,j,i,n,l,q,k=0;k")[0]; -n=f[k+1];if("'"==n||'"'==n){l="";for(q=2;f[k+q]!=n;)l+=f[k+q],q++;"H"==l?l=b.sJUIHeader:"F"==l&&(l=b.sJUIFooter);-1!=l.indexOf(".")?(n=l.split("."),i.id=n[0].substr(1,n[0].length-1),i.className=n[1]):"#"==l.charAt(0)?i.id=l.substr(1,l.length-1):i.className=l;k+=q}e.append(i);e=h(i)}else if(">"==j)e=e.parent();else if("l"==j&&d.bPaginate&&d.bLengthChange)g=qb(a);else if("f"==j&&d.bFilter)g=rb(a);else if("r"==j&&d.bProcessing)g=sb(a);else if("t"==j)g=tb(a);else if("i"==j&&d.bInfo)g=ub(a);else if("p"== -j&&d.bPaginate)g=vb(a);else if(0!==m.ext.feature.length){i=m.ext.feature;q=0;for(n=i.length;q',j=d.sSearch,j=j.match(/_INPUT_/)?j.replace("_INPUT_",g):j+g,b=h("
",{id:!f.f?c+"_filter":null,"class":b.sFilter}).append(h("
").addClass(b.sLength);a.aanFeatures.l||(i[0].id=c+"_length");i.children().append(a.oLanguage.sLengthMenu.replace("_MENU_",e[0].outerHTML));h("select",i).val(a._iDisplayLength).on("change.DT",function(){Ta(a,h(this).val());O(a)});h(a.nTable).on("length.dt.DT",function(b,c,d){a===c&&h("select",i).val(d)});return i[0]}function vb(a){var b=a.sPaginationType,c=m.ext.pager[b],d="function"===typeof c,e=function(a){O(a)},b=h("
").addClass(a.oClasses.sPaging+b)[0],f=a.aanFeatures; -d||c.fnInit(a,b,e);f.p||(b.id=a.sTableId+"_paginate",a.aoDrawCallback.push({fn:function(a){if(d){var b=a._iDisplayStart,i=a._iDisplayLength,h=a.fnRecordsDisplay(),l=-1===i,b=l?0:Math.ceil(b/i),i=l?1:Math.ceil(h/i),h=c(b,i),k,l=0;for(k=f.p.length;lf&&(d=0)):"first"==b?d=0: -"previous"==b?(d=0<=e?d-e:0,0>d&&(d=0)):"next"==b?d+e",{id:!a.aanFeatures.r?a.sTableId+"_processing":null,"class":a.oClasses.sProcessing}).html(a.oLanguage.sProcessing).insertBefore(a.nTable)[0]}function C(a,b){a.oFeatures.bProcessing&&h(a.aanFeatures.r).css("display",b?"block":"none");v(a,null,"processing", -[a,b])}function tb(a){var b=h(a.nTable);b.attr("role","grid");var c=a.oScroll;if(""===c.sX&&""===c.sY)return a.nTable;var d=c.sX,e=c.sY,f=a.oClasses,g=b.children("caption"),j=g.length?g[0]._captionSide:null,i=h(b[0].cloneNode(!1)),n=h(b[0].cloneNode(!1)),l=b.children("tfoot");l.length||(l=null);i=h("
",{"class":f.sScrollWrapper}).append(h("
",{"class":f.sScrollHead}).css({overflow:"hidden",position:"relative",border:0,width:d?!d?null:t(d):"100%"}).append(h("
",{"class":f.sScrollHeadInner}).css({"box-sizing":"content-box", -width:c.sXInner||"100%"}).append(i.removeAttr("id").css("margin-left",0).append("top"===j?g:null).append(b.children("thead"))))).append(h("
",{"class":f.sScrollBody}).css({position:"relative",overflow:"auto",width:!d?null:t(d)}).append(b));l&&i.append(h("
",{"class":f.sScrollFoot}).css({overflow:"hidden",border:0,width:d?!d?null:t(d):"100%"}).append(h("
",{"class":f.sScrollFootInner}).append(n.removeAttr("id").css("margin-left",0).append("bottom"===j?g:null).append(b.children("tfoot"))))); -var b=i.children(),k=b[0],f=b[1],s=l?b[2]:null;if(d)h(f).on("scroll.DT",function(){var a=this.scrollLeft;k.scrollLeft=a;l&&(s.scrollLeft=a)});h(f).css(e&&c.bCollapse?"max-height":"height",e);a.nScrollHead=k;a.nScrollBody=f;a.nScrollFoot=s;a.aoDrawCallback.push({fn:la,sName:"scrolling"});return i[0]}function la(a){var b=a.oScroll,c=b.sX,d=b.sXInner,e=b.sY,b=b.iBarWidth,f=h(a.nScrollHead),g=f[0].style,j=f.children("div"),i=j[0].style,n=j.children("table"),j=a.nScrollBody,l=h(j),q=j.style,s=h(a.nScrollFoot).children("div"), -m=s.children("table"),p=h(a.nTHead),o=h(a.nTable),u=o[0],v=u.style,r=a.nTFoot?h(a.nTFoot):null,x=a.oBrowser,U=x.bScrollOversize,ac=D(a.aoColumns,"nTh"),P,L,Q,w,Wa=[],y=[],z=[],A=[],B,C=function(a){a=a.style;a.paddingTop="0";a.paddingBottom="0";a.borderTopWidth="0";a.borderBottomWidth="0";a.height=0};L=j.scrollHeight>j.clientHeight;if(a.scrollBarVis!==L&&a.scrollBarVis!==k)a.scrollBarVis=L,Z(a);else{a.scrollBarVis=L;o.children("thead, tfoot").remove();r&&(Q=r.clone().prependTo(o),P=r.find("tr"),Q= -Q.find("tr"));w=p.clone().prependTo(o);p=p.find("tr");L=w.find("tr");w.find("th, td").removeAttr("tabindex");c||(q.width="100%",f[0].style.width="100%");h.each(sa(a,w),function(b,c){B=$(a,b);c.style.width=a.aoColumns[B].sWidth});r&&I(function(a){a.style.width=""},Q);f=o.outerWidth();if(""===c){v.width="100%";if(U&&(o.find("tbody").height()>j.offsetHeight||"scroll"==l.css("overflow-y")))v.width=t(o.outerWidth()-b);f=o.outerWidth()}else""!==d&&(v.width=t(d),f=o.outerWidth());I(C,L);I(function(a){z.push(a.innerHTML); -Wa.push(t(h(a).css("width")))},L);I(function(a,b){if(h.inArray(a,ac)!==-1)a.style.width=Wa[b]},p);h(L).height(0);r&&(I(C,Q),I(function(a){A.push(a.innerHTML);y.push(t(h(a).css("width")))},Q),I(function(a,b){a.style.width=y[b]},P),h(Q).height(0));I(function(a,b){a.innerHTML='
'+z[b]+"
";a.style.width=Wa[b]},L);r&&I(function(a,b){a.innerHTML='
'+A[b]+"
";a.style.width= -y[b]},Q);if(o.outerWidth()j.offsetHeight||"scroll"==l.css("overflow-y")?f+b:f;if(U&&(j.scrollHeight>j.offsetHeight||"scroll"==l.css("overflow-y")))v.width=t(P-b);(""===c||""!==d)&&K(a,1,"Possible column misalignment",6)}else P="100%";q.width=t(P);g.width=t(P);r&&(a.nScrollFoot.style.width=t(P));!e&&U&&(q.height=t(u.offsetHeight+b));c=o.outerWidth();n[0].style.width=t(c);i.width=t(c);d=o.height()>j.clientHeight||"scroll"==l.css("overflow-y");e="padding"+(x.bScrollbarLeft?"Left": -"Right");i[e]=d?b+"px":"0px";r&&(m[0].style.width=t(c),s[0].style.width=t(c),s[0].style[e]=d?b+"px":"0px");o.children("colgroup").insertBefore(o.children("thead"));l.scroll();if((a.bSorted||a.bFiltered)&&!a._drawHold)j.scrollTop=0}}function I(a,b,c){for(var d=0,e=0,f=b.length,g,j;e").appendTo(j.find("tbody")); -j.find("thead, tfoot").remove();j.append(h(a.nTHead).clone()).append(h(a.nTFoot).clone());j.find("tfoot th, tfoot td").css("width","");n=sa(a,j.find("thead")[0]);for(m=0;m").css({width:p.sWidthOrig,margin:0,padding:0,border:0,height:1}));if(a.aoData.length)for(m=0;m").css(f||e?{position:"absolute",top:0,left:0,height:1,right:0,overflow:"hidden"}:{}).append(j).appendTo(k);f&&g?j.width(g):f?(j.css("width","auto"),j.removeAttr("width"),j.width()").css("width",t(a)).appendTo(b||H.body),d=c[0].offsetWidth;c.remove();return d}function Hb(a,b){var c=Ib(a,b);if(0>c)return null;var d=a.aoData[c];return!d.nTr?h("").html(B(a,c,b,"display"))[0]:d.anCells[b]}function Ib(a,b){for(var c,d=-1,e=-1,f=0,g=a.aoData.length;fd&&(d=c.length,e=f);return e}function t(a){return null===a?"0px":"number"==typeof a?0>a?"0px":a+"px":a.match(/\d$/)?a+"px":a}function W(a){var b,c,d=[],e=a.aoColumns,f,g,j,i;b=a.aaSortingFixed;c=h.isPlainObject(b);var n=[];f=function(a){a.length&&!h.isArray(a[0])?n.push(a):h.merge(n,a)};h.isArray(b)&&f(b);c&&b.pre&&f(b.pre);f(a.aaSorting);c&&b.post&&f(b.post);for(a=0;ae?1:0,0!==c)return"asc"===j.dir?c:-c;c=d[a];e=d[b];return ce?1:0}):i.sort(function(a,b){var c,g,j,i,k=h.length,m=f[a]._aSortData,p=f[b]._aSortData;for(j=0;jg?1:0})}a.bSorted=!0}function Kb(a){for(var b,c,d=a.aoColumns,e=W(a),a=a.oLanguage.oAria,f=0,g=d.length;f/g, -"");var i=c.nTh;i.removeAttribute("aria-sort");c.bSortable&&(0e?e+1:3));e=0;for(f=d.length;ee?e+1:3))}a.aLastSort=d}function Jb(a,b){var c=a.aoColumns[b],d=m.ext.order[c.sSortDataType],e;d&&(e=d.call(a.oInstance,a,b,aa(a,b)));for(var f,g=m.ext.type.order[c.sType+"-pre"],j=0,i=a.aoData.length;j=f.length?[0,c[1]]:c)}));b.search!== -k&&h.extend(a.oPreviousSearch,Db(b.search));if(b.columns){d=0;for(e=b.columns.length;d=c&&(b=c-d);b-=b%d;if(-1===d||0>b)b=0;a._iDisplayStart=b}function Pa(a,b){var c=a.renderer,d=m.ext.renderer[b];return h.isPlainObject(c)&&c[b]?d[c[b]]||d._:"string"===typeof c?d[c]||d._:d._}function y(a){return a.oFeatures.bServerSide?"ssp":a.ajax||a.sAjaxSource?"ajax":"dom"}function Aa(a,b){var c=[],c=Nb.numbers_length,d=Math.floor(c/2);b<=c?c=X(0,b):a<=d?(c=X(0, -c-2),c.push("ellipsis"),c.push(b-1)):(a>=b-1-d?c=X(b-(c-2),b):(c=X(a-d+2,a+d-1),c.push("ellipsis"),c.push(b-1)),c.splice(0,0,"ellipsis"),c.splice(0,0,0));c.DT_el="span";return c}function fb(a){h.each({num:function(b){return Ba(b,a)},"num-fmt":function(b){return Ba(b,a,Za)},"html-num":function(b){return Ba(b,a,Ca)},"html-num-fmt":function(b){return Ba(b,a,Ca,Za)}},function(b,c){x.type.order[b+a+"-pre"]=c;b.match(/^html\-/)&&(x.type.search[b+a]=x.type.search.html)})}function Ob(a){return function(){var b= -[za(this[m.ext.iApiIndex])].concat(Array.prototype.slice.call(arguments));return m.ext.internal[a].apply(this,b)}}var m=function(a){this.$=function(a,b){return this.api(!0).$(a,b)};this._=function(a,b){return this.api(!0).rows(a,b).data()};this.api=function(a){return a?new u(za(this[x.iApiIndex])):new u(this)};this.fnAddData=function(a,b){var c=this.api(!0),d=h.isArray(a)&&(h.isArray(a[0])||h.isPlainObject(a[0]))?c.rows.add(a):c.row.add(a);(b===k||b)&&c.draw();return d.flatten().toArray()};this.fnAdjustColumnSizing= -function(a){var b=this.api(!0).columns.adjust(),c=b.settings()[0],d=c.oScroll;a===k||a?b.draw(!1):(""!==d.sX||""!==d.sY)&&la(c)};this.fnClearTable=function(a){var b=this.api(!0).clear();(a===k||a)&&b.draw()};this.fnClose=function(a){this.api(!0).row(a).child.hide()};this.fnDeleteRow=function(a,b,c){var d=this.api(!0),a=d.rows(a),e=a.settings()[0],h=e.aoData[a[0][0]];a.remove();b&&b.call(this,e,h);(c===k||c)&&d.draw();return h};this.fnDestroy=function(a){this.api(!0).destroy(a)};this.fnDraw=function(a){this.api(!0).draw(a)}; -this.fnFilter=function(a,b,c,d,e,h){e=this.api(!0);null===b||b===k?e.search(a,c,d,h):e.column(b).search(a,c,d,h);e.draw()};this.fnGetData=function(a,b){var c=this.api(!0);if(a!==k){var d=a.nodeName?a.nodeName.toLowerCase():"";return b!==k||"td"==d||"th"==d?c.cell(a,b).data():c.row(a).data()||null}return c.data().toArray()};this.fnGetNodes=function(a){var b=this.api(!0);return a!==k?b.row(a).node():b.rows().nodes().flatten().toArray()};this.fnGetPosition=function(a){var b=this.api(!0),c=a.nodeName.toUpperCase(); -return"TR"==c?b.row(a).index():"TD"==c||"TH"==c?(a=b.cell(a).index(),[a.row,a.columnVisible,a.column]):null};this.fnIsOpen=function(a){return this.api(!0).row(a).child.isShown()};this.fnOpen=function(a,b,c){return this.api(!0).row(a).child(b,c).show().child()[0]};this.fnPageChange=function(a,b){var c=this.api(!0).page(a);(b===k||b)&&c.draw(!1)};this.fnSetColumnVis=function(a,b,c){a=this.api(!0).column(a).visible(b);(c===k||c)&&a.columns.adjust().draw()};this.fnSettings=function(){return za(this[x.iApiIndex])}; -this.fnSort=function(a){this.api(!0).order(a).draw()};this.fnSortListener=function(a,b,c){this.api(!0).order.listener(a,b,c)};this.fnUpdate=function(a,b,c,d,e){var h=this.api(!0);c===k||null===c?h.row(b).data(a):h.cell(b,c).data(a);(e===k||e)&&h.columns.adjust();(d===k||d)&&h.draw();return 0};this.fnVersionCheck=x.fnVersionCheck;var b=this,c=a===k,d=this.length;c&&(a={});this.oApi=this.internal=x.internal;for(var e in m.ext.internal)e&&(this[e]=Ob(e));this.each(function(){var e={},g=1t<"F"ip>'),o.renderer)?h.isPlainObject(o.renderer)&& -!o.renderer.header&&(o.renderer.header="jqueryui"):o.renderer="jqueryui":h.extend(r,m.ext.classes,g.oClasses);q.addClass(r.sTable);o.iInitDisplayStart===k&&(o.iInitDisplayStart=g.iDisplayStart,o._iDisplayStart=g.iDisplayStart);null!==g.iDeferLoading&&(o.bDeferLoading=!0,e=h.isArray(g.iDeferLoading),o._iRecordsDisplay=e?g.iDeferLoading[0]:g.iDeferLoading,o._iRecordsTotal=e?g.iDeferLoading[1]:g.iDeferLoading);var t=o.oLanguage;h.extend(!0,t,g.oLanguage);""!==t.sUrl&&(h.ajax({dataType:"json",url:t.sUrl, -success:function(a){Fa(a);J(l.oLanguage,a);h.extend(true,t,a);ha(o)},error:function(){ha(o)}}),n=!0);null===g.asStripeClasses&&(o.asStripeClasses=[r.sStripeOdd,r.sStripeEven]);var e=o.asStripeClasses,x=q.children("tbody").find("tr").eq(0);-1!==h.inArray(!0,h.map(e,function(a){return x.hasClass(a)}))&&(h("tbody tr",this).removeClass(e.join(" ")),o.asDestroyStripes=e.slice());e=[];s=this.getElementsByTagName("thead");0!==s.length&&(ea(o.aoHeader,s[0]),e=sa(o));if(null===g.aoColumns){s=[];j=0;for(i= -e.length;j").appendTo(q));o.nTHead=b[0];b=q.children("tbody");b.length===0&&(b=h("").appendTo(q));o.nTBody=b[0];b=q.children("tfoot");if(b.length===0&&a.length>0&&(o.oScroll.sX!==""||o.oScroll.sY!==""))b=h("").appendTo(q);if(b.length===0||b.children().length===0)q.addClass(r.sNoFooter);else if(b.length>0){o.nTFoot=b[0];ea(o.aoFooter,o.nTFoot)}if(g.aaData)for(j=0;j/g,cc=/^[\w\+\-]/,dc=/[\w\+\-]$/,ec=RegExp("(\\/|\\.|\\*|\\+|\\?|\\||\\(|\\)|\\[|\\]|\\{|\\}|\\\\|\\$|\\^|\\-)","g"),Za=/[',$£€¥%\u2009\u202F\u20BD\u20a9\u20BArfk]/gi,M=function(a){return!a||!0===a||"-"===a?!0:!1},Qb=function(a){var b=parseInt(a,10);return!isNaN(b)&&isFinite(a)?b:null}, -Rb=function(a,b){$a[b]||($a[b]=RegExp(Sa(b),"g"));return"string"===typeof a&&"."!==b?a.replace(/\./g,"").replace($a[b],"."):a},ab=function(a,b,c){var d="string"===typeof a;if(M(a))return!0;b&&d&&(a=Rb(a,b));c&&d&&(a=a.replace(Za,""));return!isNaN(parseFloat(a))&&isFinite(a)},Sb=function(a,b,c){return M(a)?!0:!(M(a)||"string"===typeof a)?null:ab(a.replace(Ca,""),b,c)?!0:null},D=function(a,b,c){var d=[],e=0,f=a.length;if(c!==k)for(;e")[0],$b=wa.textContent!==k,bc=/<.*?>/g,Qa=m.util.throttle,Ub=[],w=Array.prototype,fc=function(a){var b,c,d=m.settings,e=h.map(d,function(a){return a.nTable});if(a){if(a.nTable&&a.oApi)return[a]; -if(a.nodeName&&"table"===a.nodeName.toLowerCase())return b=h.inArray(a,e),-1!==b?[d[b]]:null;if(a&&"function"===typeof a.settings)return a.settings().toArray();"string"===typeof a?c=h(a):a instanceof h&&(c=a)}else return[];if(c)return c.map(function(){b=h.inArray(this,e);return-1!==b?d[b]:null}).toArray()};u=function(a,b){if(!(this instanceof u))return new u(a,b);var c=[],d=function(a){(a=fc(a))&&(c=c.concat(a))};if(h.isArray(a))for(var e=0,f=a.length;ea?new u(b[a],this[a]):null},filter:function(a){var b=[];if(w.filter)b=w.filter.call(this,a,this);else for(var c=0,d=this.length;c< -d;c++)a.call(this,this[c],c,this)&&b.push(this[c]);return new u(this.context,b)},flatten:function(){var a=[];return new u(this.context,a.concat.apply(a,this.toArray()))},join:w.join,indexOf:w.indexOf||function(a,b){for(var c=b||0,d=this.length;c").addClass(b),h("td",c).addClass(b).html(a)[0].colSpan=ba(d),e.push(c[0]))};f(a,b);c._details&&c._details.remove();c._details=h(e); -c._detailsShow&&c._details.insertAfter(c.nTr)}return this});p(["row().child.show()","row().child().show()"],function(){Wb(this,!0);return this});p(["row().child.hide()","row().child().hide()"],function(){Wb(this,!1);return this});p(["row().child.remove()","row().child().remove()"],function(){eb(this);return this});p("row().child.isShown()",function(){var a=this.context;return a.length&&this.length?a[0].aoData[this[0]]._detailsShow||!1:!1});var gc=/^([^:]+):(name|visIdx|visible)$/,Xb=function(a,b, -c,d,e){for(var c=[],d=0,f=e.length;d=0?b:g.length+b];if(typeof a==="function"){var e=Da(c,f);return h.map(g,function(b,f){return a(f,Xb(c,f,0,0,e),i[f])?f:null})}var k=typeof a==="string"?a.match(gc): -"";if(k)switch(k[2]){case "visIdx":case "visible":b=parseInt(k[1],10);if(b<0){var m=h.map(g,function(a,b){return a.bVisible?b:null});return[m[m.length+b]]}return[$(c,b)];case "name":return h.map(j,function(a,b){return a===k[1]?b:null});default:return[]}if(a.nodeName&&a._DT_CellIndex)return[a._DT_CellIndex.column];b=h(i).filter(a).map(function(){return h.inArray(this,i)}).toArray();if(b.length||!a.nodeName)return b;b=h(a).closest("*[data-dt-column]");return b.length?[b.data("dt-column")]:[]},c,f)}, -1);c.selector.cols=a;c.selector.opts=b;return c});r("columns().header()","column().header()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].nTh},1)});r("columns().footer()","column().footer()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].nTf},1)});r("columns().data()","column().data()",function(){return this.iterator("column-rows",Xb,1)});r("columns().dataSrc()","column().dataSrc()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].mData}, -1)});r("columns().cache()","column().cache()",function(a){return this.iterator("column-rows",function(b,c,d,e,f){return ia(b.aoData,f,"search"===a?"_aFilterData":"_aSortData",c)},1)});r("columns().nodes()","column().nodes()",function(){return this.iterator("column-rows",function(a,b,c,d,e){return ia(a.aoData,e,"anCells",b)},1)});r("columns().visible()","column().visible()",function(a,b){var c=this.iterator("column",function(b,c){if(a===k)return b.aoColumns[c].bVisible;var f=b.aoColumns,g=f[c],j=b.aoData, -i,n,l;if(a!==k&&g.bVisible!==a){if(a){var m=h.inArray(!0,D(f,"bVisible"),c+1);i=0;for(n=j.length;id;return!0};m.isDataTable=m.fnIsDataTable=function(a){var b=h(a).get(0),c=!1;if(a instanceof m.Api)return!0;h.each(m.settings,function(a,e){var f=e.nScrollHead?h("table",e.nScrollHead)[0]:null,g=e.nScrollFoot? -h("table",e.nScrollFoot)[0]:null;if(e.nTable===b||f===b||g===b)c=!0});return c};m.tables=m.fnTables=function(a){var b=!1;h.isPlainObject(a)&&(b=a.api,a=a.visible);var c=h.map(m.settings,function(b){if(!a||a&&h(b.nTable).is(":visible"))return b.nTable});return b?new u(c):c};m.camelToHungarian=J;p("$()",function(a,b){var c=this.rows(b).nodes(),c=h(c);return h([].concat(c.filter(a).toArray(),c.find(a).toArray()))});h.each(["on","one","off"],function(a,b){p(b+"()",function(){var a=Array.prototype.slice.call(arguments); -a[0].match(/\.dt\b/)||(a[0]+=".dt");var d=h(this.tables().nodes());d[b].apply(d,a);return this})});p("clear()",function(){return this.iterator("table",function(a){oa(a)})});p("settings()",function(){return new u(this.context,this.context)});p("init()",function(){var a=this.context;return a.length?a[0].oInit:null});p("data()",function(){return this.iterator("table",function(a){return D(a.aoData,"_aData")}).flatten()});p("destroy()",function(a){a=a||!1;return this.iterator("table",function(b){var c= -b.nTableWrapper.parentNode,d=b.oClasses,e=b.nTable,f=b.nTBody,g=b.nTHead,j=b.nTFoot,i=h(e),f=h(f),k=h(b.nTableWrapper),l=h.map(b.aoData,function(a){return a.nTr}),p;b.bDestroying=!0;v(b,"aoDestroyCallback","destroy",[b]);a||(new u(b)).columns().visible(!0);k.off(".DT").find(":not(tbody *)").off(".DT");h(E).off(".DT-"+b.sInstance);e!=g.parentNode&&(i.children("thead").detach(),i.append(g));j&&e!=j.parentNode&&(i.children("tfoot").detach(),i.append(j));b.aaSorting=[];b.aaSortingFixed=[];xa(b);h(l).removeClass(b.asStripeClasses.join(" ")); -h("th, td",g).removeClass(d.sSortable+" "+d.sSortableAsc+" "+d.sSortableDesc+" "+d.sSortableNone);b.bJUI&&(h("th span."+d.sSortIcon+", td span."+d.sSortIcon,g).detach(),h("th, td",g).each(function(){var a=h("div."+d.sSortJUIWrapper,this);h(this).append(a.contents());a.detach()}));f.children().detach();f.append(l);g=a?"remove":"detach";i[g]();k[g]();!a&&c&&(c.insertBefore(e,b.nTableReinsertBefore),i.css("width",b.sDestroyWidth).removeClass(d.sTable),(p=b.asDestroyStripes.length)&&f.children().each(function(a){h(this).addClass(b.asDestroyStripes[a% -p])}));c=h.inArray(b,m.settings);-1!==c&&m.settings.splice(c,1)})});h.each(["column","row","cell"],function(a,b){p(b+"s().every()",function(a){var d=this.selector.opts,e=this;return this.iterator(b,function(f,g,h,i,m){a.call(e[b](g,"cell"===b?h:d,"cell"===b?d:k),g,h,i,m)})})});p("i18n()",function(a,b,c){var d=this.context[0],a=R(a)(d.oLanguage);a===k&&(a=b);c!==k&&h.isPlainObject(a)&&(a=a[c]!==k?a[c]:a._);return a.replace("%d",c)});m.version="1.10.13-dev";m.settings=[];m.models={};m.models.oSearch= -{bCaseInsensitive:!0,sSearch:"",bRegex:!1,bSmart:!0};m.models.oRow={nTr:null,anCells:null,_aData:[],_aSortData:null,_aFilterData:null,_sFilterRow:null,_sRowStripe:"",src:null,idx:-1};m.models.oColumn={idx:null,aDataSort:null,asSorting:null,bSearchable:null,bSortable:null,bVisible:null,_sManualType:null,_bAttrSrc:!1,fnCreatedCell:null,fnGetData:null,fnSetData:null,mData:null,mRender:null,nTh:null,nTf:null,sClass:null,sContentPadding:null,sDefaultContent:null,sName:null,sSortDataType:"std",sSortingClass:null, -sSortingClassJUI:null,sTitle:null,sType:null,sWidth:null,sWidthOrig:null};m.defaults={aaData:null,aaSorting:[[0,"asc"]],aaSortingFixed:[],ajax:null,aLengthMenu:[10,25,50,100],aoColumns:null,aoColumnDefs:null,aoSearchCols:[],asStripeClasses:null,bAutoWidth:!0,bDeferRender:!1,bDestroy:!1,bFilter:!0,bInfo:!0,bJQueryUI:!1,bLengthChange:!0,bPaginate:!0,bProcessing:!1,bRetrieve:!1,bScrollCollapse:!1,bServerSide:!1,bSort:!0,bSortMulti:!0,bSortCellsTop:!1,bSortClasses:!0,bStateSave:!1,fnCreatedRow:null,fnDrawCallback:null, -fnFooterCallback:null,fnFormatNumber:function(a){return a.toString().replace(/\B(?=(\d{3})+(?!\d))/g,this.oLanguage.sThousands)},fnHeaderCallback:null,fnInfoCallback:null,fnInitComplete:null,fnPreDrawCallback:null,fnRowCallback:null,fnServerData:null,fnServerParams:null,fnStateLoadCallback:function(a){try{return JSON.parse((-1===a.iStateDuration?sessionStorage:localStorage).getItem("DataTables_"+a.sInstance+"_"+location.pathname))}catch(b){}},fnStateLoadParams:null,fnStateLoaded:null,fnStateSaveCallback:function(a, -b){try{(-1===a.iStateDuration?sessionStorage:localStorage).setItem("DataTables_"+a.sInstance+"_"+location.pathname,JSON.stringify(b))}catch(c){}},fnStateSaveParams:null,iStateDuration:7200,iDeferLoading:null,iDisplayLength:10,iDisplayStart:0,iTabIndex:0,oClasses:{},oLanguage:{oAria:{sSortAscending:": activate to sort column ascending",sSortDescending:": activate to sort column descending"},oPaginate:{sFirst:"First",sLast:"Last",sNext:"Next",sPrevious:"Previous"},sEmptyTable:"No data available in table", -sInfo:"Showing _START_ to _END_ of _TOTAL_ entries",sInfoEmpty:"Showing 0 to 0 of 0 entries",sInfoFiltered:"(filtered from _MAX_ total entries)",sInfoPostFix:"",sDecimal:"",sThousands:",",sLengthMenu:"Show _MENU_ entries",sLoadingRecords:"Loading...",sProcessing:"Processing...",sSearch:"Search:",sSearchPlaceholder:"",sUrl:"",sZeroRecords:"No matching records found"},oSearch:h.extend({},m.models.oSearch),sAjaxDataProp:"data",sAjaxSource:null,sDom:"lfrtip",searchDelay:null,sPaginationType:"simple_numbers", -sScrollX:"",sScrollXInner:"",sScrollY:"",sServerMethod:"GET",renderer:null,rowId:"DT_RowId"};Y(m.defaults);m.defaults.column={aDataSort:null,iDataSort:-1,asSorting:["asc","desc"],bSearchable:!0,bSortable:!0,bVisible:!0,fnCreatedCell:null,mData:null,mRender:null,sCellType:"td",sClass:"",sContentPadding:"",sDefaultContent:null,sName:"",sSortDataType:"std",sTitle:null,sType:null,sWidth:null};Y(m.defaults.column);m.models.oSettings={oFeatures:{bAutoWidth:null,bDeferRender:null,bFilter:null,bInfo:null, -bLengthChange:null,bPaginate:null,bProcessing:null,bServerSide:null,bSort:null,bSortMulti:null,bSortClasses:null,bStateSave:null},oScroll:{bCollapse:null,iBarWidth:0,sX:null,sXInner:null,sY:null},oLanguage:{fnInfoCallback:null},oBrowser:{bScrollOversize:!1,bScrollbarLeft:!1,bBounding:!1,barWidth:0},ajax:null,aanFeatures:[],aoData:[],aiDisplay:[],aiDisplayMaster:[],aIds:{},aoColumns:[],aoHeader:[],aoFooter:[],oPreviousSearch:{},aoPreSearchCols:[],aaSorting:null,aaSortingFixed:[],asStripeClasses:null, -asDestroyStripes:[],sDestroyWidth:0,aoRowCallback:[],aoHeaderCallback:[],aoFooterCallback:[],aoDrawCallback:[],aoRowCreatedCallback:[],aoPreDrawCallback:[],aoInitComplete:[],aoStateSaveParams:[],aoStateLoadParams:[],aoStateLoaded:[],sTableId:"",nTable:null,nTHead:null,nTFoot:null,nTBody:null,nTableWrapper:null,bDeferLoading:!1,bInitialised:!1,aoOpenRows:[],sDom:null,searchDelay:null,sPaginationType:"two_button",iStateDuration:0,aoStateSave:[],aoStateLoad:[],oSavedState:null,oLoadedState:null,sAjaxSource:null, -sAjaxDataProp:null,bAjaxDataGet:!0,jqXHR:null,json:k,oAjaxData:k,fnServerData:null,aoServerParams:[],sServerMethod:null,fnFormatNumber:null,aLengthMenu:null,iDraw:0,bDrawing:!1,iDrawError:-1,_iDisplayLength:10,_iDisplayStart:0,_iRecordsTotal:0,_iRecordsDisplay:0,bJUI:null,oClasses:{},bFiltered:!1,bSorted:!1,bSortCellsTop:null,oInit:null,aoDestroyCallback:[],fnRecordsTotal:function(){return"ssp"==y(this)?1*this._iRecordsTotal:this.aiDisplayMaster.length},fnRecordsDisplay:function(){return"ssp"==y(this)? -1*this._iRecordsDisplay:this.aiDisplay.length},fnDisplayEnd:function(){var a=this._iDisplayLength,b=this._iDisplayStart,c=b+a,d=this.aiDisplay.length,e=this.oFeatures,f=e.bPaginate;return e.bServerSide?!1===f||-1===a?b+d:Math.min(b+a,this._iRecordsDisplay):!f||c>d||-1===a?d:c},oInstance:null,sInstance:null,iTabIndex:0,nScrollHead:null,nScrollFoot:null,aLastSort:[],oPlugins:{},rowIdFn:null,rowId:null};m.ext=x={buttons:{},classes:{},builder:"-source-",errMode:"alert",feature:[],search:[],selector:{cell:[], -column:[],row:[]},internal:{},legacy:{ajax:null},pager:{},renderer:{pageButton:{},header:{}},order:{},type:{detect:[],search:{},order:{}},_unique:0,fnVersionCheck:m.fnVersionCheck,iApiIndex:0,oJUIClasses:{},sVersion:m.version};h.extend(x,{afnFiltering:x.search,aTypes:x.type.detect,ofnSearch:x.type.search,oSort:x.type.order,afnSortData:x.order,aoFeatures:x.feature,oApi:x.internal,oStdClasses:x.classes,oPagination:x.pager});h.extend(m.ext.classes,{sTable:"dataTable",sNoFooter:"no-footer",sPageButton:"paginate_button", -sPageButtonActive:"current",sPageButtonDisabled:"disabled",sStripeOdd:"odd",sStripeEven:"even",sRowEmpty:"dataTables_empty",sWrapper:"dataTables_wrapper",sFilter:"dataTables_filter",sInfo:"dataTables_info",sPaging:"dataTables_paginate paging_",sLength:"dataTables_length",sProcessing:"dataTables_processing",sSortAsc:"sorting_asc",sSortDesc:"sorting_desc",sSortable:"sorting",sSortableAsc:"sorting_asc_disabled",sSortableDesc:"sorting_desc_disabled",sSortableNone:"sorting_disabled",sSortColumn:"sorting_", -sFilterInput:"",sLengthSelect:"",sScrollWrapper:"dataTables_scroll",sScrollHead:"dataTables_scrollHead",sScrollHeadInner:"dataTables_scrollHeadInner",sScrollBody:"dataTables_scrollBody",sScrollFoot:"dataTables_scrollFoot",sScrollFootInner:"dataTables_scrollFootInner",sHeaderTH:"",sFooterTH:"",sSortJUIAsc:"",sSortJUIDesc:"",sSortJUI:"",sSortJUIAscAllowed:"",sSortJUIDescAllowed:"",sSortJUIWrapper:"",sSortIcon:"",sJUIHeader:"",sJUIFooter:""});var Ea="",Ea="",G=Ea+"ui-state-default",ja=Ea+"css_right ui-icon ui-icon-", -Yb=Ea+"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix";h.extend(m.ext.oJUIClasses,m.ext.classes,{sPageButton:"fg-button ui-button "+G,sPageButtonActive:"ui-state-disabled",sPageButtonDisabled:"ui-state-disabled",sPaging:"dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_",sSortAsc:G+" sorting_asc",sSortDesc:G+" sorting_desc",sSortable:G+" sorting",sSortableAsc:G+" sorting_asc_disabled",sSortableDesc:G+" sorting_desc_disabled",sSortableNone:G+" sorting_disabled", -sSortJUIAsc:ja+"triangle-1-n",sSortJUIDesc:ja+"triangle-1-s",sSortJUI:ja+"carat-2-n-s",sSortJUIAscAllowed:ja+"carat-1-n",sSortJUIDescAllowed:ja+"carat-1-s",sSortJUIWrapper:"DataTables_sort_wrapper",sSortIcon:"DataTables_sort_icon",sScrollHead:"dataTables_scrollHead "+G,sScrollFoot:"dataTables_scrollFoot "+G,sHeaderTH:G,sFooterTH:G,sJUIHeader:Yb+" ui-corner-tl ui-corner-tr",sJUIFooter:Yb+" ui-corner-bl ui-corner-br"});var Nb=m.ext.pager;h.extend(Nb,{simple:function(){return["previous","next"]},full:function(){return["first", -"previous","next","last"]},numbers:function(a,b){return[Aa(a,b)]},simple_numbers:function(a,b){return["previous",Aa(a,b),"next"]},full_numbers:function(a,b){return["first","previous",Aa(a,b),"next","last"]},_numbers:Aa,numbers_length:7});h.extend(!0,m.ext.renderer,{pageButton:{_:function(a,b,c,d,e,f){var g=a.oClasses,j=a.oLanguage.oPaginate,i=a.oLanguage.oAria.paginate||{},k,l,m=0,p=function(b,d){var r,u,v,t,w=function(b){Va(a,b.data.action,true)};r=0;for(u=d.length;r").appendTo(b);p(v,t)}else{k=null;l="";switch(t){case "ellipsis":b.append('…');break;case "first":k=j.sFirst;l=t+(e>0?"":" "+g.sPageButtonDisabled);break;case "previous":k=j.sPrevious;l=t+(e>0?"":" "+g.sPageButtonDisabled);break;case "next":k=j.sNext;l=t+(e",{"class":g.sPageButton+ -" "+l,"aria-controls":a.sTableId,"aria-label":i[t],"data-dt-idx":m,tabindex:a.iTabIndex,id:c===0&&typeof t==="string"?a.sTableId+"_"+t:null}).html(k).appendTo(b);Ya(v,{action:t},w);m++}}}},r;try{r=h(b).find(H.activeElement).data("dt-idx")}catch(u){}p(h(b).empty(),d);r&&h(b).find("[data-dt-idx="+r+"]").focus()}}});h.extend(m.ext.type.detect,[function(a,b){var c=b.oLanguage.sDecimal;return ab(a,c)?"num"+c:null},function(a){if(a&&!(a instanceof Date)&&(!cc.test(a)||!dc.test(a)))return null;var b=Date.parse(a); -return null!==b&&!isNaN(b)||M(a)?"date":null},function(a,b){var c=b.oLanguage.sDecimal;return ab(a,c,!0)?"num-fmt"+c:null},function(a,b){var c=b.oLanguage.sDecimal;return Sb(a,c)?"html-num"+c:null},function(a,b){var c=b.oLanguage.sDecimal;return Sb(a,c,!0)?"html-num-fmt"+c:null},function(a){return M(a)||"string"===typeof a&&-1!==a.indexOf("<")?"html":null}]);h.extend(m.ext.type.search,{html:function(a){return M(a)?a:"string"===typeof a?a.replace(Pb," ").replace(Ca,""):""},string:function(a){return M(a)? -a:"string"===typeof a?a.replace(Pb," "):a}});var Ba=function(a,b,c,d){if(0!==a&&(!a||"-"===a))return-Infinity;b&&(a=Rb(a,b));a.replace&&(c&&(a=a.replace(c,"")),d&&(a=a.replace(d,"")));return 1*a};h.extend(x.type.order,{"date-pre":function(a){return Date.parse(a)||-Infinity},"html-pre":function(a){return M(a)?"":a.replace?a.replace(/<.*?>/g,"").toLowerCase():a+""},"string-pre":function(a){return M(a)?"":"string"===typeof a?a.toLowerCase():!a.toString?"":a.toString()},"string-asc":function(a,b){return a< -b?-1:a>b?1:0},"string-desc":function(a,b){return ab?-1:0}});fb("");h.extend(!0,m.ext.renderer,{header:{_:function(a,b,c,d){h(a.nTable).on("order.dt.DT",function(e,f,g,h){if(a===f){e=c.idx;b.removeClass(c.sSortingClass+" "+d.sSortAsc+" "+d.sSortDesc).addClass(h[e]=="asc"?d.sSortAsc:h[e]=="desc"?d.sSortDesc:c.sSortingClass)}})},jqueryui:function(a,b,c,d){h("
").addClass(d.sSortJUIWrapper).append(b.contents()).append(h("").addClass(d.sSortIcon+" "+c.sSortingClassJUI)).appendTo(b); -h(a.nTable).on("order.dt.DT",function(e,f,g,h){if(a===f){e=c.idx;b.removeClass(d.sSortAsc+" "+d.sSortDesc).addClass(h[e]=="asc"?d.sSortAsc:h[e]=="desc"?d.sSortDesc:c.sSortingClass);b.find("span."+d.sSortIcon).removeClass(d.sSortJUIAsc+" "+d.sSortJUIDesc+" "+d.sSortJUI+" "+d.sSortJUIAscAllowed+" "+d.sSortJUIDescAllowed).addClass(h[e]=="asc"?d.sSortJUIAsc:h[e]=="desc"?d.sSortJUIDesc:c.sSortingClassJUI)}})}}});var Zb=function(a){return"string"===typeof a?a.replace(//g,">").replace(/"/g, -"""):a};m.render={number:function(a,b,c,d,e){return{display:function(f){if("number"!==typeof f&&"string"!==typeof f)return f;var g=0>f?"-":"",h=parseFloat(f);if(isNaN(h))return Zb(f);h=h.toFixed(c);f=Math.abs(h);h=parseInt(f,10);f=c?b+(f-h).toFixed(c).substring(2):"";return g+(d||"")+h.toString().replace(/\B(?=(\d{3})+(?!\d))/g,a)+f+(e||"")}}},text:function(){return{display:Zb}}};h.extend(m.ext.internal,{_fnExternApiFunc:Ob,_fnBuildAjax:ta,_fnAjaxUpdate:nb,_fnAjaxParameters:wb,_fnAjaxUpdateDraw:xb, -_fnAjaxDataSrc:ua,_fnAddColumn:Ga,_fnColumnOptions:ka,_fnAdjustColumnSizing:Z,_fnVisibleToColumnIndex:$,_fnColumnIndexToVisible:aa,_fnVisbleColumns:ba,_fnGetColumns:ma,_fnColumnTypes:Ia,_fnApplyColumnDefs:kb,_fnHungarianMap:Y,_fnCamelToHungarian:J,_fnLanguageCompat:Fa,_fnBrowserDetect:ib,_fnAddData:N,_fnAddTr:na,_fnNodeToDataIndex:function(a,b){return b._DT_RowIndex!==k?b._DT_RowIndex:null},_fnNodeToColumnIndex:function(a,b,c){return h.inArray(c,a.aoData[b].anCells)},_fnGetCellData:B,_fnSetCellData:lb, -_fnSplitObjNotation:La,_fnGetObjectDataFn:R,_fnSetObjectDataFn:S,_fnGetDataMaster:Ma,_fnClearTable:oa,_fnDeleteIndex:pa,_fnInvalidate:da,_fnGetRowElements:Ka,_fnCreateTr:Ja,_fnBuildHead:mb,_fnDrawHead:fa,_fnDraw:O,_fnReDraw:T,_fnAddOptionsHtml:pb,_fnDetectHeader:ea,_fnGetUniqueThs:sa,_fnFeatureHtmlFilter:rb,_fnFilterComplete:ga,_fnFilterCustom:Ab,_fnFilterColumn:zb,_fnFilter:yb,_fnFilterCreateSearch:Ra,_fnEscapeRegex:Sa,_fnFilterData:Bb,_fnFeatureHtmlInfo:ub,_fnUpdateInfo:Eb,_fnInfoMacros:Fb,_fnInitialise:ha, -_fnInitComplete:va,_fnLengthChange:Ta,_fnFeatureHtmlLength:qb,_fnFeatureHtmlPaginate:vb,_fnPageChange:Va,_fnFeatureHtmlProcessing:sb,_fnProcessingDisplay:C,_fnFeatureHtmlTable:tb,_fnScrollDraw:la,_fnApplyToChildren:I,_fnCalculateColumnWidths:Ha,_fnThrottle:Qa,_fnConvertToWidth:Gb,_fnGetWidestNode:Hb,_fnGetMaxLenString:Ib,_fnStringToCss:t,_fnSortFlatten:W,_fnSort:ob,_fnSortAria:Kb,_fnSortListener:Xa,_fnSortAttachListener:Oa,_fnSortingClasses:xa,_fnSortData:Jb,_fnSaveState:ya,_fnLoadState:Lb,_fnSettingsFromNode:za, -_fnLog:K,_fnMap:F,_fnBindAction:Ya,_fnCallbackReg:z,_fnCallbackFire:v,_fnLengthOverflow:Ua,_fnRenderer:Pa,_fnDataSource:y,_fnRowAttributes:Na,_fnCalculateEnd:function(){}});h.fn.dataTable=m;m.$=h;h.fn.dataTableSettings=m.settings;h.fn.dataTableExt=m.ext;h.fn.DataTable=function(a){return h(this).dataTable(a).api()};h.each(m,function(a,b){h.fn.DataTable[a]=b});return h.fn.dataTable}); +(function(h){"function"===typeof define&&define.amd?define(["jquery"],function(D){return h(D,window,document)}):"object"===typeof exports?module.exports=function(D,I){D||(D=window);I||(I="undefined"!==typeof window?require("jquery"):require("jquery")(D));return h(I,D,D.document)}:h(jQuery,window,document)})(function(h,D,I,k){function Y(a){var b,c,d={};h.each(a,function(e){if((b=e.match(/^([^A-Z]+?)([A-Z])/))&&-1!=="a aa ai ao as b fn i m o s ".indexOf(b[1]+" "))c=e.replace(b[0],b[2].toLowerCase()), +d[c]=e,"o"===b[1]&&Y(a[e])});a._hungarianMap=d}function K(a,b,c){a._hungarianMap||Y(a);var d;h.each(b,function(e){d=a._hungarianMap[e];if(d!==k&&(c||b[d]===k))"o"===d.charAt(0)?(b[d]||(b[d]={}),h.extend(!0,b[d],b[e]),K(a[d],b[d],c)):b[d]=b[e]})}function Fa(a){var b=m.defaults.oLanguage,c=a.sZeroRecords;!a.sEmptyTable&&(c&&"No data available in table"===b.sEmptyTable)&&E(a,a,"sZeroRecords","sEmptyTable");!a.sLoadingRecords&&(c&&"Loading..."===b.sLoadingRecords)&&E(a,a,"sZeroRecords","sLoadingRecords"); +a.sInfoThousands&&(a.sThousands=a.sInfoThousands);(a=a.sDecimal)&&db(a)}function eb(a){A(a,"ordering","bSort");A(a,"orderMulti","bSortMulti");A(a,"orderClasses","bSortClasses");A(a,"orderCellsTop","bSortCellsTop");A(a,"order","aaSorting");A(a,"orderFixed","aaSortingFixed");A(a,"paging","bPaginate");A(a,"pagingType","sPaginationType");A(a,"pageLength","iDisplayLength");A(a,"searching","bFilter");"boolean"===typeof a.sScrollX&&(a.sScrollX=a.sScrollX?"100%":"");"boolean"===typeof a.scrollX&&(a.scrollX= +a.scrollX?"100%":"");if(a=a.aoSearchCols)for(var b=0,c=a.length;b").css({position:"fixed",top:0,left:0,height:1,width:1,overflow:"hidden"}).append(h("
").css({position:"absolute",top:1,left:1, +width:100,overflow:"scroll"}).append(h("
").css({width:"100%",height:10}))).appendTo("body"),d=c.children(),e=d.children();b.barWidth=d[0].offsetWidth-d[0].clientWidth;b.bScrollOversize=100===e[0].offsetWidth&&100!==d[0].clientWidth;b.bScrollbarLeft=1!==Math.round(e.offset().left);b.bBounding=c[0].getBoundingClientRect().width?!0:!1;c.remove()}h.extend(a.oBrowser,m.__browser);a.oScroll.iBarWidth=m.__browser.barWidth}function hb(a,b,c,d,e,f){var g,j=!1;c!==k&&(g=c,j=!0);for(;d!==e;)a.hasOwnProperty(d)&& +(g=j?b(g,a[d],d,a):a[d],j=!0,d+=f);return g}function Ga(a,b){var c=m.defaults.column,d=a.aoColumns.length,c=h.extend({},m.models.oColumn,c,{nTh:b?b:I.createElement("th"),sTitle:c.sTitle?c.sTitle:b?b.innerHTML:"",aDataSort:c.aDataSort?c.aDataSort:[d],mData:c.mData?c.mData:d,idx:d});a.aoColumns.push(c);c=a.aoPreSearchCols;c[d]=h.extend({},m.models.oSearch,c[d]);ja(a,d,h(b).data())}function ja(a,b,c){var b=a.aoColumns[b],d=a.oClasses,e=h(b.nTh);if(!b.sWidthOrig){b.sWidthOrig=e.attr("width")||null;var f= +(e.attr("style")||"").match(/width:\s*(\d+[pxem%]+)/);f&&(b.sWidthOrig=f[1])}c!==k&&null!==c&&(fb(c),K(m.defaults.column,c),c.mDataProp!==k&&!c.mData&&(c.mData=c.mDataProp),c.sType&&(b._sManualType=c.sType),c.className&&!c.sClass&&(c.sClass=c.className),h.extend(b,c),E(b,c,"sWidth","sWidthOrig"),c.iDataSort!==k&&(b.aDataSort=[c.iDataSort]),E(b,c,"aDataSort"));var g=b.mData,j=Q(g),i=b.mRender?Q(b.mRender):null,c=function(a){return"string"===typeof a&&-1!==a.indexOf("@")};b._bAttrSrc=h.isPlainObject(g)&& +(c(g.sort)||c(g.type)||c(g.filter));b._setter=null;b.fnGetData=function(a,b,c){var d=j(a,b,k,c);return i&&b?i(d,b,a,c):d};b.fnSetData=function(a,b,c){return R(g)(a,b,c)};"number"!==typeof g&&(a._rowReadObject=!0);a.oFeatures.bSort||(b.bSortable=!1,e.addClass(d.sSortableNone));a=-1!==h.inArray("asc",b.asSorting);c=-1!==h.inArray("desc",b.asSorting);!b.bSortable||!a&&!c?(b.sSortingClass=d.sSortableNone,b.sSortingClassJUI=""):a&&!c?(b.sSortingClass=d.sSortableAsc,b.sSortingClassJUI=d.sSortJUIAscAllowed): +!a&&c?(b.sSortingClass=d.sSortableDesc,b.sSortingClassJUI=d.sSortJUIDescAllowed):(b.sSortingClass=d.sSortable,b.sSortingClassJUI=d.sSortJUI)}function U(a){if(!1!==a.oFeatures.bAutoWidth){var b=a.aoColumns;Ha(a);for(var c=0,d=b.length;cq[f])d(l.length+q[f],n);else if("string"===typeof q[f]){j=0;for(i=l.length;jb&&a[e]--; -1!=d&&c===k&&a.splice(d,1)}function ca(a,b,c,d){var e=a.aoData[b],f,g=function(c,d){for(;c.childNodes.length;)c.removeChild(c.firstChild); +c.innerHTML=B(a,b,d,"display")};if("dom"===c||(!c||"auto"===c)&&"dom"===e.src)e._aData=Ka(a,e,d,d===k?k:e._aData).data;else{var j=e.anCells;if(j)if(d!==k)g(j[d],d);else{c=0;for(f=j.length;c").appendTo(g));b=0;for(c=l.length;btr").attr("role","row");h(g).find(">tr>th, >tr>td").addClass(n.sHeaderTH);h(j).find(">tr>th, >tr>td").addClass(n.sFooterTH); +if(null!==j){a=a.aoFooter[0];b=0;for(c=a.length;b=a.fnRecordsDisplay()?0:g,a.iInitDisplayStart= +-1);var g=a._iDisplayStart,n=a.fnDisplayEnd();if(a.bDeferLoading)a.bDeferLoading=!1,a.iDraw++,C(a,!1);else if(j){if(!a.bDestroying&&!lb(a))return}else a.iDraw++;if(0!==i.length){f=j?a.aoData.length:n;for(j=j?0:g;j",{"class":e?d[0]:""}).append(h("",{valign:"top",colSpan:aa(a),"class":a.oClasses.sRowEmpty}).html(c))[0];u(a,"aoHeaderCallback","header",[h(a.nTHead).children("tr")[0],Ma(a),g,n,i]);u(a,"aoFooterCallback","footer",[h(a.nTFoot).children("tr")[0],Ma(a),g,n,i]);d=h(a.nTBody);d.children().detach();d.append(h(b));u(a,"aoDrawCallback","draw",[a]);a.bSorted=!1;a.bFiltered=!1;a.bDrawing=!1}}function T(a,b){var c=a.oFeatures,d=c.bFilter; +c.bSort&&mb(a);d?fa(a,a.oPreviousSearch):a.aiDisplay=a.aiDisplayMaster.slice();!0!==b&&(a._iDisplayStart=0);a._drawHold=b;O(a);a._drawHold=!1}function nb(a){var b=a.oClasses,c=h(a.nTable),c=h("
").insertBefore(c),d=a.oFeatures,e=h("
",{id:a.sTableId+"_wrapper","class":b.sWrapper+(a.nTFoot?"":" "+b.sNoFooter)});a.nHolding=c[0];a.nTableWrapper=e[0];a.nTableReinsertBefore=a.nTable.nextSibling;for(var f=a.sDom.split(""),g,j,i,n,l,q,t=0;t")[0]; +n=f[t+1];if("'"==n||'"'==n){l="";for(q=2;f[t+q]!=n;)l+=f[t+q],q++;"H"==l?l=b.sJUIHeader:"F"==l&&(l=b.sJUIFooter);-1!=l.indexOf(".")?(n=l.split("."),i.id=n[0].substr(1,n[0].length-1),i.className=n[1]):"#"==l.charAt(0)?i.id=l.substr(1,l.length-1):i.className=l;t+=q}e.append(i);e=h(i)}else if(">"==j)e=e.parent();else if("l"==j&&d.bPaginate&&d.bLengthChange)g=ob(a);else if("f"==j&&d.bFilter)g=pb(a);else if("r"==j&&d.bProcessing)g=qb(a);else if("t"==j)g=rb(a);else if("i"==j&&d.bInfo)g=sb(a);else if("p"== +j&&d.bPaginate)g=tb(a);else if(0!==m.ext.feature.length){i=m.ext.feature;q=0;for(n=i.length;q',j=d.sSearch,j=j.match(/_INPUT_/)?j.replace("_INPUT_",g):j+g,b=h("
",{id:!f.f?c+"_filter":null,"class":b.sFilter}).append(h("
").addClass(b.sLength);a.aanFeatures.l||(i[0].id=c+"_length");i.children().append(a.oLanguage.sLengthMenu.replace("_MENU_",e[0].outerHTML));h("select",i).val(a._iDisplayLength).bind("change.DT",function(){Ra(a,h(this).val());O(a)});h(a.nTable).bind("length.dt.DT",function(b,c,d){a===c&&h("select",i).val(d)});return i[0]}function tb(a){var b=a.sPaginationType,c=m.ext.pager[b],d="function"===typeof c,e=function(a){O(a)}, +b=h("
").addClass(a.oClasses.sPaging+b)[0],f=a.aanFeatures;d||c.fnInit(a,b,e);f.p||(b.id=a.sTableId+"_paginate",a.aoDrawCallback.push({fn:function(a){if(d){var b=a._iDisplayStart,i=a._iDisplayLength,h=a.fnRecordsDisplay(),l=-1===i,b=l?0:Math.ceil(b/i),i=l?1:Math.ceil(h/i),h=c(b,i),k,l=0;for(k=f.p.length;lf&&(d=0)):"first"==b?d=0:"previous"==b?(d=0<=e?d-e:0,0>d&&(d=0)):"next"==b?d+e",{id:!a.aanFeatures.r?a.sTableId+"_processing":null,"class":a.oClasses.sProcessing}).html(a.oLanguage.sProcessing).insertBefore(a.nTable)[0]}function C(a,b){a.oFeatures.bProcessing&&h(a.aanFeatures.r).css("display", +b?"block":"none");u(a,null,"processing",[a,b])}function rb(a){var b=h(a.nTable);b.attr("role","grid");var c=a.oScroll;if(""===c.sX&&""===c.sY)return a.nTable;var d=c.sX,e=c.sY,f=a.oClasses,g=b.children("caption"),j=g.length?g[0]._captionSide:null,i=h(b[0].cloneNode(!1)),n=h(b[0].cloneNode(!1)),l=b.children("tfoot");l.length||(l=null);i=h("
",{"class":f.sScrollWrapper}).append(h("
",{"class":f.sScrollHead}).css({overflow:"hidden",position:"relative",border:0,width:d?!d?null:x(d):"100%"}).append(h("
", +{"class":f.sScrollHeadInner}).css({"box-sizing":"content-box",width:c.sXInner||"100%"}).append(i.removeAttr("id").css("margin-left",0).append("top"===j?g:null).append(b.children("thead"))))).append(h("
",{"class":f.sScrollBody}).css({position:"relative",overflow:"auto",width:!d?null:x(d)}).append(b));l&&i.append(h("
",{"class":f.sScrollFoot}).css({overflow:"hidden",border:0,width:d?!d?null:x(d):"100%"}).append(h("
",{"class":f.sScrollFootInner}).append(n.removeAttr("id").css("margin-left", +0).append("bottom"===j?g:null).append(b.children("tfoot")))));var b=i.children(),k=b[0],f=b[1],t=l?b[2]:null;if(d)h(f).on("scroll.DT",function(){var a=this.scrollLeft;k.scrollLeft=a;l&&(t.scrollLeft=a)});h(f).css(e&&c.bCollapse?"max-height":"height",e);a.nScrollHead=k;a.nScrollBody=f;a.nScrollFoot=t;a.aoDrawCallback.push({fn:ka,sName:"scrolling"});return i[0]}function ka(a){var b=a.oScroll,c=b.sX,d=b.sXInner,e=b.sY,b=b.iBarWidth,f=h(a.nScrollHead),g=f[0].style,j=f.children("div"),i=j[0].style,n=j.children("table"), +j=a.nScrollBody,l=h(j),q=j.style,t=h(a.nScrollFoot).children("div"),m=t.children("table"),o=h(a.nTHead),F=h(a.nTable),p=F[0],r=p.style,u=a.nTFoot?h(a.nTFoot):null,Eb=a.oBrowser,Ua=Eb.bScrollOversize,s=G(a.aoColumns,"nTh"),P,v,w,y,z=[],A=[],B=[],C=[],D,E=function(a){a=a.style;a.paddingTop="0";a.paddingBottom="0";a.borderTopWidth="0";a.borderBottomWidth="0";a.height=0};v=j.scrollHeight>j.clientHeight;if(a.scrollBarVis!==v&&a.scrollBarVis!==k)a.scrollBarVis=v,U(a);else{a.scrollBarVis=v;F.children("thead, tfoot").remove(); +u&&(w=u.clone().prependTo(F),P=u.find("tr"),w=w.find("tr"));y=o.clone().prependTo(F);o=o.find("tr");v=y.find("tr");y.find("th, td").removeAttr("tabindex");c||(q.width="100%",f[0].style.width="100%");h.each(qa(a,y),function(b,c){D=Z(a,b);c.style.width=a.aoColumns[D].sWidth});u&&J(function(a){a.style.width=""},w);f=F.outerWidth();if(""===c){r.width="100%";if(Ua&&(F.find("tbody").height()>j.offsetHeight||"scroll"==l.css("overflow-y")))r.width=x(F.outerWidth()-b);f=F.outerWidth()}else""!==d&&(r.width= +x(d),f=F.outerWidth());J(E,v);J(function(a){B.push(a.innerHTML);z.push(x(h(a).css("width")))},v);J(function(a,b){if(h.inArray(a,s)!==-1)a.style.width=z[b]},o);h(v).height(0);u&&(J(E,w),J(function(a){C.push(a.innerHTML);A.push(x(h(a).css("width")))},w),J(function(a,b){a.style.width=A[b]},P),h(w).height(0));J(function(a,b){a.innerHTML='
'+B[b]+"
";a.style.width=z[b]},v);u&&J(function(a,b){a.innerHTML='
'+ +C[b]+"
";a.style.width=A[b]},w);if(F.outerWidth()j.offsetHeight||"scroll"==l.css("overflow-y")?f+b:f;if(Ua&&(j.scrollHeight>j.offsetHeight||"scroll"==l.css("overflow-y")))r.width=x(P-b);(""===c||""!==d)&&L(a,1,"Possible column misalignment",6)}else P="100%";q.width=x(P);g.width=x(P);u&&(a.nScrollFoot.style.width=x(P));!e&&Ua&&(q.height=x(p.offsetHeight+b));c=F.outerWidth();n[0].style.width=x(c);i.width=x(c);d=F.height()>j.clientHeight||"scroll"==l.css("overflow-y");e="padding"+ +(Eb.bScrollbarLeft?"Left":"Right");i[e]=d?b+"px":"0px";u&&(m[0].style.width=x(c),t[0].style.width=x(c),t[0].style[e]=d?b+"px":"0px");F.children("colgroup").insertBefore(F.children("thead"));l.scroll();if((a.bSorted||a.bFiltered)&&!a._drawHold)j.scrollTop=0}}function J(a,b,c){for(var d=0,e=0,f=b.length,g,j;e").appendTo(j.find("tbody")); +j.find("thead, tfoot").remove();j.append(h(a.nTHead).clone()).append(h(a.nTFoot).clone());j.find("tfoot th, tfoot td").css("width","");n=qa(a,j.find("thead")[0]);for(m=0;m").css({width:o.sWidthOrig,margin:0,padding:0,border:0,height:1}));if(a.aoData.length)for(m=0;m").css(f||e?{position:"absolute",top:0,left:0,height:1,right:0,overflow:"hidden"}:{}).append(j).appendTo(k);f&&g?j.width(g):f?(j.css("width","auto"),j.removeAttr("width"),j.width()").css("width",x(a)).appendTo(b||I.body),d=c[0].offsetWidth;c.remove();return d}function Gb(a,b){var c=Hb(a,b);if(0>c)return null;var d= +a.aoData[c];return!d.nTr?h("").html(B(a,c,b,"display"))[0]:d.anCells[b]}function Hb(a,b){for(var c,d=-1,e=-1,f=0,g=a.aoData.length;fd&&(d=c.length,e=f);return e}function x(a){return null===a?"0px":"number"==typeof a?0>a?"0px":a+"px":a.match(/\d$/)?a+"px":a}function W(a){var b,c,d=[],e=a.aoColumns,f,g,j,i;b=a.aaSortingFixed;c=h.isPlainObject(b);var n=[];f=function(a){a.length&&!h.isArray(a[0])?n.push(a):h.merge(n, +a)};h.isArray(b)&&f(b);c&&b.pre&&f(b.pre);f(a.aaSorting);c&&b.post&&f(b.post);for(a=0;ae?1:0,0!==c)return"asc"===j.dir?c:-c;c=d[a];e=d[b];return ce?1:0}):i.sort(function(a,b){var c,g,j,i,k=h.length,m=f[a]._aSortData,p=f[b]._aSortData;for(j=0;jg?1:0})}a.bSorted=!0}function Jb(a){for(var b,c,d=a.aoColumns,e=W(a),a=a.oLanguage.oAria,f=0,g=d.length;f/g,"");var i=c.nTh;i.removeAttribute("aria-sort");c.bSortable&&(0e?e+1:3));e=0;for(f=d.length;ee?e+1:3))}a.aLastSort=d}function Ib(a, +b){var c=a.aoColumns[b],d=m.ext.order[c.sSortDataType],e;d&&(e=d.call(a.oInstance,a,b,$(a,b)));for(var f,g=m.ext.type.order[c.sType+"-pre"],j=0,i=a.aoData.length;j=d.length?[0,c[1]]:c)}));e.search!==k&&h.extend(a.oPreviousSearch,Bb(e.search));b=0;for(c=e.columns.length;b=c&&(b=c-d);b-=b%d;if(-1===d||0>b)b=0;a._iDisplayStart=b}function Pa(a,b){var c=a.renderer,d=m.ext.renderer[b];return h.isPlainObject(c)&&c[b]?d[c[b]]||d._:"string"===typeof c?d[c]||d._:d._}function y(a){return a.oFeatures.bServerSide? +"ssp":a.ajax||a.sAjaxSource?"ajax":"dom"}function Aa(a,b){var c=[],c=Mb.numbers_length,d=Math.floor(c/2);b<=c?c=X(0,b):a<=d?(c=X(0,c-2),c.push("ellipsis"),c.push(b-1)):(a>=b-1-d?c=X(b-(c-2),b):(c=X(a-d+2,a+d-1),c.push("ellipsis"),c.push(b-1)),c.splice(0,0,"ellipsis"),c.splice(0,0,0));c.DT_el="span";return c}function db(a){h.each({num:function(b){return Ba(b,a)},"num-fmt":function(b){return Ba(b,a,Xa)},"html-num":function(b){return Ba(b,a,Ca)},"html-num-fmt":function(b){return Ba(b,a,Ca,Xa)}},function(b, +c){v.type.order[b+a+"-pre"]=c;b.match(/^html\-/)&&(v.type.search[b+a]=v.type.search.html)})}function Nb(a){return function(){var b=[za(this[m.ext.iApiIndex])].concat(Array.prototype.slice.call(arguments));return m.ext.internal[a].apply(this,b)}}var m,v,r,p,s,Ya={},Ob=/[\r\n]/g,Ca=/<.*?>/g,bc=/^[\w\+\-]/,cc=/[\w\+\-]$/,Zb=RegExp("(\\/|\\.|\\*|\\+|\\?|\\||\\(|\\)|\\[|\\]|\\{|\\}|\\\\|\\$|\\^|\\-)","g"),Xa=/[',$£€¥%\u2009\u202F\u20BD\u20a9\u20BArfk]/gi,M=function(a){return!a||!0===a||"-"===a?!0:!1}, +Pb=function(a){var b=parseInt(a,10);return!isNaN(b)&&isFinite(a)?b:null},Qb=function(a,b){Ya[b]||(Ya[b]=RegExp(va(b),"g"));return"string"===typeof a&&"."!==b?a.replace(/\./g,"").replace(Ya[b],"."):a},Za=function(a,b,c){var d="string"===typeof a;if(M(a))return!0;b&&d&&(a=Qb(a,b));c&&d&&(a=a.replace(Xa,""));return!isNaN(parseFloat(a))&&isFinite(a)},Rb=function(a,b,c){return M(a)?!0:!(M(a)||"string"===typeof a)?null:Za(a.replace(Ca,""),b,c)?!0:null},G=function(a,b,c){var d=[],e=0,f=a.length;if(c!==k)for(;e< +f;e++)a[e]&&a[e][b]&&d.push(a[e][b][c]);else for(;e")[0],$b=wa.textContent!==k,ac=/<.*?>/g;m=function(a){this.$=function(a,b){return this.api(!0).$(a,b)};this._=function(a,b){return this.api(!0).rows(a,b).data()};this.api=function(a){return a?new r(za(this[v.iApiIndex])):new r(this)};this.fnAddData=function(a,b){var c=this.api(!0),d=h.isArray(a)&&(h.isArray(a[0])||h.isPlainObject(a[0]))?c.rows.add(a):c.row.add(a);(b===k||b)&&c.draw();return d.flatten().toArray()}; +this.fnAdjustColumnSizing=function(a){var b=this.api(!0).columns.adjust(),c=b.settings()[0],d=c.oScroll;a===k||a?b.draw(!1):(""!==d.sX||""!==d.sY)&&ka(c)};this.fnClearTable=function(a){var b=this.api(!0).clear();(a===k||a)&&b.draw()};this.fnClose=function(a){this.api(!0).row(a).child.hide()};this.fnDeleteRow=function(a,b,c){var d=this.api(!0),a=d.rows(a),e=a.settings()[0],h=e.aoData[a[0][0]];a.remove();b&&b.call(this,e,h);(c===k||c)&&d.draw();return h};this.fnDestroy=function(a){this.api(!0).destroy(a)}; +this.fnDraw=function(a){this.api(!0).draw(a)};this.fnFilter=function(a,b,c,d,e,h){e=this.api(!0);null===b||b===k?e.search(a,c,d,h):e.column(b).search(a,c,d,h);e.draw()};this.fnGetData=function(a,b){var c=this.api(!0);if(a!==k){var d=a.nodeName?a.nodeName.toLowerCase():"";return b!==k||"td"==d||"th"==d?c.cell(a,b).data():c.row(a).data()||null}return c.data().toArray()};this.fnGetNodes=function(a){var b=this.api(!0);return a!==k?b.row(a).node():b.rows().nodes().flatten().toArray()};this.fnGetPosition= +function(a){var b=this.api(!0),c=a.nodeName.toUpperCase();return"TR"==c?b.row(a).index():"TD"==c||"TH"==c?(a=b.cell(a).index(),[a.row,a.columnVisible,a.column]):null};this.fnIsOpen=function(a){return this.api(!0).row(a).child.isShown()};this.fnOpen=function(a,b,c){return this.api(!0).row(a).child(b,c).show().child()[0]};this.fnPageChange=function(a,b){var c=this.api(!0).page(a);(b===k||b)&&c.draw(!1)};this.fnSetColumnVis=function(a,b,c){a=this.api(!0).column(a).visible(b);(c===k||c)&&a.columns.adjust().draw()}; +this.fnSettings=function(){return za(this[v.iApiIndex])};this.fnSort=function(a){this.api(!0).order(a).draw()};this.fnSortListener=function(a,b,c){this.api(!0).order.listener(a,b,c)};this.fnUpdate=function(a,b,c,d,e){var h=this.api(!0);c===k||null===c?h.row(b).data(a):h.cell(b,c).data(a);(e===k||e)&&h.columns.adjust();(d===k||d)&&h.draw();return 0};this.fnVersionCheck=v.fnVersionCheck;var b=this,c=a===k,d=this.length;c&&(a={});this.oApi=this.internal=v.internal;for(var e in m.ext.internal)e&&(this[e]= +Nb(e));this.each(function(){var e={},e=1t<"F"ip>'),o.renderer)?h.isPlainObject(o.renderer)&&!o.renderer.header&&(o.renderer.header="jqueryui"):o.renderer="jqueryui":h.extend(i,m.ext.classes,e.oClasses);q.addClass(i.sTable);o.iInitDisplayStart===k&&(o.iInitDisplayStart=e.iDisplayStart,o._iDisplayStart=e.iDisplayStart);null!==e.iDeferLoading&&(o.bDeferLoading=!0,g=h.isArray(e.iDeferLoading),o._iRecordsDisplay=g?e.iDeferLoading[0]:e.iDeferLoading,o._iRecordsTotal=g?e.iDeferLoading[1]:e.iDeferLoading);var r=o.oLanguage;h.extend(!0, +r,e.oLanguage);""!==r.sUrl&&(h.ajax({dataType:"json",url:r.sUrl,success:function(a){Fa(a);K(l.oLanguage,a);h.extend(true,r,a);ga(o)},error:function(){ga(o)}}),n=!0);null===e.asStripeClasses&&(o.asStripeClasses=[i.sStripeOdd,i.sStripeEven]);var g=o.asStripeClasses,v=q.children("tbody").find("tr").eq(0);-1!==h.inArray(!0,h.map(g,function(a){return v.hasClass(a)}))&&(h("tbody tr",this).removeClass(g.join(" ")),o.asDestroyStripes=g.slice());t=[];g=this.getElementsByTagName("thead");0!==g.length&&(da(o.aoHeader, +g[0]),t=qa(o));if(null===e.aoColumns){p=[];g=0;for(j=t.length;g").appendTo(this));o.nTHead=j[0];j=q.children("tbody");0===j.length&&(j=h("").appendTo(this));o.nTBody=j[0];j=q.children("tfoot");if(0===j.length&&0").appendTo(this);0===j.length||0===j.children().length?q.addClass(i.sNoFooter):0a?new r(b[a],this[a]):null},filter:function(a){var b=[];if(w.filter)b=w.filter.call(this,a,this);else for(var c=0,d=this.length;c").addClass(b),h("td",c).addClass(b).html(a)[0].colSpan=aa(d),e.push(c[0]))};f(a,b);c._details&&c._details.remove();c._details=h(e);c._detailsShow&&c._details.insertAfter(c.nTr)}return this});p(["row().child.show()","row().child().show()"],function(){Vb(this, +!0);return this});p(["row().child.hide()","row().child().hide()"],function(){Vb(this,!1);return this});p(["row().child.remove()","row().child().remove()"],function(){cb(this);return this});p("row().child.isShown()",function(){var a=this.context;return a.length&&this.length?a[0].aoData[this[0]]._detailsShow||!1:!1});var ec=/^(.+):(name|visIdx|visible)$/,Wb=function(a,b,c,d,e){for(var c=[],d=0,f=e.length;d=0?b:g.length+b];if(typeof a==="function"){var e=Da(c,f);return h.map(g,function(b,f){return a(f,Wb(c,f,0,0,e),i[f])?f:null})}var k=typeof a==="string"?a.match(ec):"";if(k)switch(k[2]){case "visIdx":case "visible":b=parseInt(k[1],10);if(b<0){var m=h.map(g,function(a,b){return a.bVisible?b:null}); +return[m[m.length+b]]}return[Z(c,b)];case "name":return h.map(j,function(a,b){return a===k[1]?b:null});default:return[]}if(a.nodeName&&a._DT_CellIndex)return[a._DT_CellIndex.column];b=h(i).filter(a).map(function(){return h.inArray(this,i)}).toArray();if(b.length||!a.nodeName)return b;b=h(a).closest("*[data-dt-column]");return b.length?[b.data("dt-column")]:[]},c,f)},1);c.selector.cols=a;c.selector.opts=b;return c});s("columns().header()","column().header()",function(){return this.iterator("column", +function(a,b){return a.aoColumns[b].nTh},1)});s("columns().footer()","column().footer()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].nTf},1)});s("columns().data()","column().data()",function(){return this.iterator("column-rows",Wb,1)});s("columns().dataSrc()","column().dataSrc()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].mData},1)});s("columns().cache()","column().cache()",function(a){return this.iterator("column-rows",function(b, +c,d,e,f){return ha(b.aoData,f,"search"===a?"_aFilterData":"_aSortData",c)},1)});s("columns().nodes()","column().nodes()",function(){return this.iterator("column-rows",function(a,b,c,d,e){return ha(a.aoData,e,"anCells",b)},1)});s("columns().visible()","column().visible()",function(a,b){return this.iterator("column",function(c,d){if(a===k)return c.aoColumns[d].bVisible;var e=c.aoColumns,f=e[d],g=c.aoData,j,i,n;if(a!==k&&f.bVisible!==a){if(a){var l=h.inArray(!0,G(e,"bVisible"),d+1);j=0;for(i=g.length;j< +i;j++)n=g[j].nTr,e=g[j].anCells,n&&n.insertBefore(e[d],e[l]||null)}else h(G(c.aoData,"anCells",d)).detach();f.bVisible=a;ea(c,c.aoHeader);ea(c,c.aoFooter);(b===k||b)&&U(c);u(c,null,"column-visibility",[c,d,a,b]);ya(c)}})});s("columns().indexes()","column().index()",function(a){return this.iterator("column",function(b,c){return"visible"===a?$(b,c):c},1)});p("columns.adjust()",function(){return this.iterator("table",function(a){U(a)},1)});p("column.index()",function(a,b){if(0!==this.context.length){var c= +this.context[0];if("fromVisible"===a||"toData"===a)return Z(c,b);if("fromData"===a||"toVisible"===a)return $(c,b)}});p("column()",function(a,b){return bb(this.columns(a,b))});p("cells()",function(a,b,c){h.isPlainObject(a)&&(a.row===k?(c=a,a=null):(c=b,b=null));h.isPlainObject(b)&&(c=b,b=null);if(null===b||b===k)return this.iterator("table",function(b){var d=a,e=ab(c),f=b.aoData,g=Da(b,e),j=Sb(ha(f,g,"anCells")),i=h([].concat.apply([],j)),l,n=b.aoColumns.length,m,p,r,u,v,s;return $a("cell",d,function(a){var c= +typeof a==="function";if(a===null||a===k||c){m=[];p=0;for(r=g.length;pd;return!0};m.isDataTable=m.fnIsDataTable=function(a){var b=h(a).get(0),c=!1;h.each(m.settings,function(a,e){var f=e.nScrollHead?h("table",e.nScrollHead)[0]:null,g=e.nScrollFoot?h("table",e.nScrollFoot)[0]:null;if(e.nTable===b||f===b||g===b)c=!0});return c};m.tables=m.fnTables=function(a){var b=!1;h.isPlainObject(a)&&(b=a.api,a=a.visible);var c=h.map(m.settings,function(b){if(!a|| +a&&h(b.nTable).is(":visible"))return b.nTable});return b?new r(c):c};m.util={throttle:ua,escapeRegex:va};m.camelToHungarian=K;p("$()",function(a,b){var c=this.rows(b).nodes(),c=h(c);return h([].concat(c.filter(a).toArray(),c.find(a).toArray()))});h.each(["on","one","off"],function(a,b){p(b+"()",function(){var a=Array.prototype.slice.call(arguments);a[0].match(/\.dt\b/)||(a[0]+=".dt");var d=h(this.tables().nodes());d[b].apply(d,a);return this})});p("clear()",function(){return this.iterator("table", +function(a){na(a)})});p("settings()",function(){return new r(this.context,this.context)});p("init()",function(){var a=this.context;return a.length?a[0].oInit:null});p("data()",function(){return this.iterator("table",function(a){return G(a.aoData,"_aData")}).flatten()});p("destroy()",function(a){a=a||!1;return this.iterator("table",function(b){var c=b.nTableWrapper.parentNode,d=b.oClasses,e=b.nTable,f=b.nTBody,g=b.nTHead,j=b.nTFoot,i=h(e),f=h(f),k=h(b.nTableWrapper),l=h.map(b.aoData,function(a){return a.nTr}), +p;b.bDestroying=!0;u(b,"aoDestroyCallback","destroy",[b]);a||(new r(b)).columns().visible(!0);k.unbind(".DT").find(":not(tbody *)").unbind(".DT");h(D).unbind(".DT-"+b.sInstance);e!=g.parentNode&&(i.children("thead").detach(),i.append(g));j&&e!=j.parentNode&&(i.children("tfoot").detach(),i.append(j));b.aaSorting=[];b.aaSortingFixed=[];xa(b);h(l).removeClass(b.asStripeClasses.join(" "));h("th, td",g).removeClass(d.sSortable+" "+d.sSortableAsc+" "+d.sSortableDesc+" "+d.sSortableNone);b.bJUI&&(h("th span."+ +d.sSortIcon+", td span."+d.sSortIcon,g).detach(),h("th, td",g).each(function(){var a=h("div."+d.sSortJUIWrapper,this);h(this).append(a.contents());a.detach()}));f.children().detach();f.append(l);g=a?"remove":"detach";i[g]();k[g]();!a&&c&&(c.insertBefore(e,b.nTableReinsertBefore),i.css("width",b.sDestroyWidth).removeClass(d.sTable),(p=b.asDestroyStripes.length)&&f.children().each(function(a){h(this).addClass(b.asDestroyStripes[a%p])}));c=h.inArray(b,m.settings);-1!==c&&m.settings.splice(c,1)})});h.each(["column", +"row","cell"],function(a,b){p(b+"s().every()",function(a){var d=this.selector.opts,e=this;return this.iterator(b,function(f,g,h,i,n){a.call(e[b](g,"cell"===b?h:d,"cell"===b?d:k),g,h,i,n)})})});p("i18n()",function(a,b,c){var d=this.context[0],a=Q(a)(d.oLanguage);a===k&&(a=b);c!==k&&h.isPlainObject(a)&&(a=a[c]!==k?a[c]:a._);return a.replace("%d",c)});m.version="1.10.12-dev";m.settings=[];m.models={};m.models.oSearch={bCaseInsensitive:!0,sSearch:"",bRegex:!1,bSmart:!0};m.models.oRow={nTr:null,anCells:null, +_aData:[],_aSortData:null,_aFilterData:null,_sFilterRow:null,_sRowStripe:"",src:null,idx:-1};m.models.oColumn={idx:null,aDataSort:null,asSorting:null,bSearchable:null,bSortable:null,bVisible:null,_sManualType:null,_bAttrSrc:!1,fnCreatedCell:null,fnGetData:null,fnSetData:null,mData:null,mRender:null,nTh:null,nTf:null,sClass:null,sContentPadding:null,sDefaultContent:null,sName:null,sSortDataType:"std",sSortingClass:null,sSortingClassJUI:null,sTitle:null,sType:null,sWidth:null,sWidthOrig:null};m.defaults= +{aaData:null,aaSorting:[[0,"asc"]],aaSortingFixed:[],ajax:null,aLengthMenu:[10,25,50,100],aoColumns:null,aoColumnDefs:null,aoSearchCols:[],asStripeClasses:null,bAutoWidth:!0,bDeferRender:!1,bDestroy:!1,bFilter:!0,bInfo:!0,bJQueryUI:!1,bLengthChange:!0,bPaginate:!0,bProcessing:!1,bRetrieve:!1,bScrollCollapse:!1,bServerSide:!1,bSort:!0,bSortMulti:!0,bSortCellsTop:!1,bSortClasses:!0,bStateSave:!1,fnCreatedRow:null,fnDrawCallback:null,fnFooterCallback:null,fnFormatNumber:function(a){return a.toString().replace(/\B(?=(\d{3})+(?!\d))/g, +this.oLanguage.sThousands)},fnHeaderCallback:null,fnInfoCallback:null,fnInitComplete:null,fnPreDrawCallback:null,fnRowCallback:null,fnServerData:null,fnServerParams:null,fnStateLoadCallback:function(a){try{return JSON.parse((-1===a.iStateDuration?sessionStorage:localStorage).getItem("DataTables_"+a.sInstance+"_"+location.pathname))}catch(b){}},fnStateLoadParams:null,fnStateLoaded:null,fnStateSaveCallback:function(a,b){try{(-1===a.iStateDuration?sessionStorage:localStorage).setItem("DataTables_"+a.sInstance+ +"_"+location.pathname,JSON.stringify(b))}catch(c){}},fnStateSaveParams:null,iStateDuration:7200,iDeferLoading:null,iDisplayLength:10,iDisplayStart:0,iTabIndex:0,oClasses:{},oLanguage:{oAria:{sSortAscending:": activate to sort column ascending",sSortDescending:": activate to sort column descending"},oPaginate:{sFirst:"First",sLast:"Last",sNext:"Next",sPrevious:"Previous"},sEmptyTable:"No data available in table",sInfo:"Showing _START_ to _END_ of _TOTAL_ entries",sInfoEmpty:"Showing 0 to 0 of 0 entries", +sInfoFiltered:"(filtered from _MAX_ total entries)",sInfoPostFix:"",sDecimal:"",sThousands:",",sLengthMenu:"Show _MENU_ entries",sLoadingRecords:"Loading...",sProcessing:"Processing...",sSearch:"Search:",sSearchPlaceholder:"",sUrl:"",sZeroRecords:"No matching records found"},oSearch:h.extend({},m.models.oSearch),sAjaxDataProp:"data",sAjaxSource:null,sDom:"lfrtip",searchDelay:null,sPaginationType:"simple_numbers",sScrollX:"",sScrollXInner:"",sScrollY:"",sServerMethod:"GET",renderer:null,rowId:"DT_RowId"}; +Y(m.defaults);m.defaults.column={aDataSort:null,iDataSort:-1,asSorting:["asc","desc"],bSearchable:!0,bSortable:!0,bVisible:!0,fnCreatedCell:null,mData:null,mRender:null,sCellType:"td",sClass:"",sContentPadding:"",sDefaultContent:null,sName:"",sSortDataType:"std",sTitle:null,sType:null,sWidth:null};Y(m.defaults.column);m.models.oSettings={oFeatures:{bAutoWidth:null,bDeferRender:null,bFilter:null,bInfo:null,bLengthChange:null,bPaginate:null,bProcessing:null,bServerSide:null,bSort:null,bSortMulti:null, +bSortClasses:null,bStateSave:null},oScroll:{bCollapse:null,iBarWidth:0,sX:null,sXInner:null,sY:null},oLanguage:{fnInfoCallback:null},oBrowser:{bScrollOversize:!1,bScrollbarLeft:!1,bBounding:!1,barWidth:0},ajax:null,aanFeatures:[],aoData:[],aiDisplay:[],aiDisplayMaster:[],aIds:{},aoColumns:[],aoHeader:[],aoFooter:[],oPreviousSearch:{},aoPreSearchCols:[],aaSorting:null,aaSortingFixed:[],asStripeClasses:null,asDestroyStripes:[],sDestroyWidth:0,aoRowCallback:[],aoHeaderCallback:[],aoFooterCallback:[], +aoDrawCallback:[],aoRowCreatedCallback:[],aoPreDrawCallback:[],aoInitComplete:[],aoStateSaveParams:[],aoStateLoadParams:[],aoStateLoaded:[],sTableId:"",nTable:null,nTHead:null,nTFoot:null,nTBody:null,nTableWrapper:null,bDeferLoading:!1,bInitialised:!1,aoOpenRows:[],sDom:null,searchDelay:null,sPaginationType:"two_button",iStateDuration:0,aoStateSave:[],aoStateLoad:[],oSavedState:null,oLoadedState:null,sAjaxSource:null,sAjaxDataProp:null,bAjaxDataGet:!0,jqXHR:null,json:k,oAjaxData:k,fnServerData:null, +aoServerParams:[],sServerMethod:null,fnFormatNumber:null,aLengthMenu:null,iDraw:0,bDrawing:!1,iDrawError:-1,_iDisplayLength:10,_iDisplayStart:0,_iRecordsTotal:0,_iRecordsDisplay:0,bJUI:null,oClasses:{},bFiltered:!1,bSorted:!1,bSortCellsTop:null,oInit:null,aoDestroyCallback:[],fnRecordsTotal:function(){return"ssp"==y(this)?1*this._iRecordsTotal:this.aiDisplayMaster.length},fnRecordsDisplay:function(){return"ssp"==y(this)?1*this._iRecordsDisplay:this.aiDisplay.length},fnDisplayEnd:function(){var a= +this._iDisplayLength,b=this._iDisplayStart,c=b+a,d=this.aiDisplay.length,e=this.oFeatures,f=e.bPaginate;return e.bServerSide?!1===f||-1===a?b+d:Math.min(b+a,this._iRecordsDisplay):!f||c>d||-1===a?d:c},oInstance:null,sInstance:null,iTabIndex:0,nScrollHead:null,nScrollFoot:null,aLastSort:[],oPlugins:{},rowIdFn:null,rowId:null};m.ext=v={buttons:{},classes:{},builder:"-source-",errMode:"alert",feature:[],search:[],selector:{cell:[],column:[],row:[]},internal:{},legacy:{ajax:null},pager:{},renderer:{pageButton:{}, +header:{}},order:{},type:{detect:[],search:{},order:{}},_unique:0,fnVersionCheck:m.fnVersionCheck,iApiIndex:0,oJUIClasses:{},sVersion:m.version};h.extend(v,{afnFiltering:v.search,aTypes:v.type.detect,ofnSearch:v.type.search,oSort:v.type.order,afnSortData:v.order,aoFeatures:v.feature,oApi:v.internal,oStdClasses:v.classes,oPagination:v.pager});h.extend(m.ext.classes,{sTable:"dataTable",sNoFooter:"no-footer",sPageButton:"paginate_button",sPageButtonActive:"current",sPageButtonDisabled:"disabled",sStripeOdd:"odd", +sStripeEven:"even",sRowEmpty:"dataTables_empty",sWrapper:"dataTables_wrapper",sFilter:"dataTables_filter",sInfo:"dataTables_info",sPaging:"dataTables_paginate paging_",sLength:"dataTables_length",sProcessing:"dataTables_processing",sSortAsc:"sorting_asc",sSortDesc:"sorting_desc",sSortable:"sorting",sSortableAsc:"sorting_asc_disabled",sSortableDesc:"sorting_desc_disabled",sSortableNone:"sorting_disabled",sSortColumn:"sorting_",sFilterInput:"",sLengthSelect:"",sScrollWrapper:"dataTables_scroll",sScrollHead:"dataTables_scrollHead", +sScrollHeadInner:"dataTables_scrollHeadInner",sScrollBody:"dataTables_scrollBody",sScrollFoot:"dataTables_scrollFoot",sScrollFootInner:"dataTables_scrollFootInner",sHeaderTH:"",sFooterTH:"",sSortJUIAsc:"",sSortJUIDesc:"",sSortJUI:"",sSortJUIAscAllowed:"",sSortJUIDescAllowed:"",sSortJUIWrapper:"",sSortIcon:"",sJUIHeader:"",sJUIFooter:""});var Ea="",Ea="",H=Ea+"ui-state-default",ia=Ea+"css_right ui-icon ui-icon-",Xb=Ea+"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix";h.extend(m.ext.oJUIClasses, +m.ext.classes,{sPageButton:"fg-button ui-button "+H,sPageButtonActive:"ui-state-disabled",sPageButtonDisabled:"ui-state-disabled",sPaging:"dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_",sSortAsc:H+" sorting_asc",sSortDesc:H+" sorting_desc",sSortable:H+" sorting",sSortableAsc:H+" sorting_asc_disabled",sSortableDesc:H+" sorting_desc_disabled",sSortableNone:H+" sorting_disabled",sSortJUIAsc:ia+"triangle-1-n",sSortJUIDesc:ia+"triangle-1-s",sSortJUI:ia+"carat-2-n-s", +sSortJUIAscAllowed:ia+"carat-1-n",sSortJUIDescAllowed:ia+"carat-1-s",sSortJUIWrapper:"DataTables_sort_wrapper",sSortIcon:"DataTables_sort_icon",sScrollHead:"dataTables_scrollHead "+H,sScrollFoot:"dataTables_scrollFoot "+H,sHeaderTH:H,sFooterTH:H,sJUIHeader:Xb+" ui-corner-tl ui-corner-tr",sJUIFooter:Xb+" ui-corner-bl ui-corner-br"});var Mb=m.ext.pager;h.extend(Mb,{simple:function(){return["previous","next"]},full:function(){return["first","previous","next","last"]},numbers:function(a,b){return[Aa(a, +b)]},simple_numbers:function(a,b){return["previous",Aa(a,b),"next"]},full_numbers:function(a,b){return["first","previous",Aa(a,b),"next","last"]},_numbers:Aa,numbers_length:7});h.extend(!0,m.ext.renderer,{pageButton:{_:function(a,b,c,d,e,f){var g=a.oClasses,j=a.oLanguage.oPaginate,i=a.oLanguage.oAria.paginate||{},k,l,m=0,p=function(b,d){var o,r,u,s,v=function(b){Ta(a,b.data.action,true)};o=0;for(r=d.length;o").appendTo(b);p(u,s)}else{k=null; +l="";switch(s){case "ellipsis":b.append('…');break;case "first":k=j.sFirst;l=s+(e>0?"":" "+g.sPageButtonDisabled);break;case "previous":k=j.sPrevious;l=s+(e>0?"":" "+g.sPageButtonDisabled);break;case "next":k=j.sNext;l=s+(e",{"class":g.sPageButton+" "+l,"aria-controls":a.sTableId,"aria-label":i[s], +"data-dt-idx":m,tabindex:a.iTabIndex,id:c===0&&typeof s==="string"?a.sTableId+"_"+s:null}).html(k).appendTo(b);Wa(u,{action:s},v);m++}}}},r;try{r=h(b).find(I.activeElement).data("dt-idx")}catch(o){}p(h(b).empty(),d);r&&h(b).find("[data-dt-idx="+r+"]").focus()}}});h.extend(m.ext.type.detect,[function(a,b){var c=b.oLanguage.sDecimal;return Za(a,c)?"num"+c:null},function(a){if(a&&!(a instanceof Date)&&(!bc.test(a)||!cc.test(a)))return null;var b=Date.parse(a);return null!==b&&!isNaN(b)||M(a)?"date": +null},function(a,b){var c=b.oLanguage.sDecimal;return Za(a,c,!0)?"num-fmt"+c:null},function(a,b){var c=b.oLanguage.sDecimal;return Rb(a,c)?"html-num"+c:null},function(a,b){var c=b.oLanguage.sDecimal;return Rb(a,c,!0)?"html-num-fmt"+c:null},function(a){return M(a)||"string"===typeof a&&-1!==a.indexOf("<")?"html":null}]);h.extend(m.ext.type.search,{html:function(a){return M(a)?a:"string"===typeof a?a.replace(Ob," ").replace(Ca,""):""},string:function(a){return M(a)?a:"string"===typeof a?a.replace(Ob, +" "):a}});var Ba=function(a,b,c,d){if(0!==a&&(!a||"-"===a))return-Infinity;b&&(a=Qb(a,b));a.replace&&(c&&(a=a.replace(c,"")),d&&(a=a.replace(d,"")));return 1*a};h.extend(v.type.order,{"date-pre":function(a){return Date.parse(a)||0},"html-pre":function(a){return M(a)?"":a.replace?a.replace(/<.*?>/g,"").toLowerCase():a+""},"string-pre":function(a){return M(a)?"":"string"===typeof a?a.toLowerCase():!a.toString?"":a.toString()},"string-asc":function(a,b){return ab?1:0},"string-desc":function(a, +b){return ab?-1:0}});db("");h.extend(!0,m.ext.renderer,{header:{_:function(a,b,c,d){h(a.nTable).on("order.dt.DT",function(e,f,g,h){if(a===f){e=c.idx;b.removeClass(c.sSortingClass+" "+d.sSortAsc+" "+d.sSortDesc).addClass(h[e]=="asc"?d.sSortAsc:h[e]=="desc"?d.sSortDesc:c.sSortingClass)}})},jqueryui:function(a,b,c,d){h("
").addClass(d.sSortJUIWrapper).append(b.contents()).append(h("").addClass(d.sSortIcon+" "+c.sSortingClassJUI)).appendTo(b);h(a.nTable).on("order.dt.DT",function(e, +f,g,h){if(a===f){e=c.idx;b.removeClass(d.sSortAsc+" "+d.sSortDesc).addClass(h[e]=="asc"?d.sSortAsc:h[e]=="desc"?d.sSortDesc:c.sSortingClass);b.find("span."+d.sSortIcon).removeClass(d.sSortJUIAsc+" "+d.sSortJUIDesc+" "+d.sSortJUI+" "+d.sSortJUIAscAllowed+" "+d.sSortJUIDescAllowed).addClass(h[e]=="asc"?d.sSortJUIAsc:h[e]=="desc"?d.sSortJUIDesc:c.sSortingClassJUI)}})}}});var Yb=function(a){return"string"===typeof a?a.replace(//g,">").replace(/"/g,"""):a};m.render={number:function(a, +b,c,d,e){return{display:function(f){if("number"!==typeof f&&"string"!==typeof f)return f;var g=0>f?"-":"",h=parseFloat(f);if(isNaN(h))return Yb(f);f=Math.abs(h);h=parseInt(f,10);f=c?b+(f-h).toFixed(c).substring(2):"";return g+(d||"")+h.toString().replace(/\B(?=(\d{3})+(?!\d))/g,a)+f+(e||"")}}},text:function(){return{display:Yb}}};h.extend(m.ext.internal,{_fnExternApiFunc:Nb,_fnBuildAjax:ra,_fnAjaxUpdate:lb,_fnAjaxParameters:ub,_fnAjaxUpdateDraw:vb,_fnAjaxDataSrc:sa,_fnAddColumn:Ga,_fnColumnOptions:ja, +_fnAdjustColumnSizing:U,_fnVisibleToColumnIndex:Z,_fnColumnIndexToVisible:$,_fnVisbleColumns:aa,_fnGetColumns:la,_fnColumnTypes:Ia,_fnApplyColumnDefs:ib,_fnHungarianMap:Y,_fnCamelToHungarian:K,_fnLanguageCompat:Fa,_fnBrowserDetect:gb,_fnAddData:N,_fnAddTr:ma,_fnNodeToDataIndex:function(a,b){return b._DT_RowIndex!==k?b._DT_RowIndex:null},_fnNodeToColumnIndex:function(a,b,c){return h.inArray(c,a.aoData[b].anCells)},_fnGetCellData:B,_fnSetCellData:jb,_fnSplitObjNotation:La,_fnGetObjectDataFn:Q,_fnSetObjectDataFn:R, +_fnGetDataMaster:Ma,_fnClearTable:na,_fnDeleteIndex:oa,_fnInvalidate:ca,_fnGetRowElements:Ka,_fnCreateTr:Ja,_fnBuildHead:kb,_fnDrawHead:ea,_fnDraw:O,_fnReDraw:T,_fnAddOptionsHtml:nb,_fnDetectHeader:da,_fnGetUniqueThs:qa,_fnFeatureHtmlFilter:pb,_fnFilterComplete:fa,_fnFilterCustom:yb,_fnFilterColumn:xb,_fnFilter:wb,_fnFilterCreateSearch:Qa,_fnEscapeRegex:va,_fnFilterData:zb,_fnFeatureHtmlInfo:sb,_fnUpdateInfo:Cb,_fnInfoMacros:Db,_fnInitialise:ga,_fnInitComplete:ta,_fnLengthChange:Ra,_fnFeatureHtmlLength:ob, +_fnFeatureHtmlPaginate:tb,_fnPageChange:Ta,_fnFeatureHtmlProcessing:qb,_fnProcessingDisplay:C,_fnFeatureHtmlTable:rb,_fnScrollDraw:ka,_fnApplyToChildren:J,_fnCalculateColumnWidths:Ha,_fnThrottle:ua,_fnConvertToWidth:Fb,_fnGetWidestNode:Gb,_fnGetMaxLenString:Hb,_fnStringToCss:x,_fnSortFlatten:W,_fnSort:mb,_fnSortAria:Jb,_fnSortListener:Va,_fnSortAttachListener:Oa,_fnSortingClasses:xa,_fnSortData:Ib,_fnSaveState:ya,_fnLoadState:Kb,_fnSettingsFromNode:za,_fnLog:L,_fnMap:E,_fnBindAction:Wa,_fnCallbackReg:z, +_fnCallbackFire:u,_fnLengthOverflow:Sa,_fnRenderer:Pa,_fnDataSource:y,_fnRowAttributes:Na,_fnCalculateEnd:function(){}});h.fn.dataTable=m;m.$=h;h.fn.dataTableSettings=m.settings;h.fn.dataTableExt=m.ext;h.fn.DataTable=function(a){return h(this).dataTable(a).api()};h.each(m,function(a,b){h.fn.DataTable[a]=b});return h.fn.dataTable}); diff --git a/package.json b/package.json index 3a64b665..35cb54af 100644 --- a/package.json +++ b/package.json @@ -27,8 +27,7 @@ "filter", "sort", "page", - "internationalisable", - "jquery-plugin" + "internationalisable" ], "repository": { "type": "git",