From ea9e926b53ebce8e9056c82e32ef920ba8a770e3 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Fri, 25 Sep 2015 10:08:52 +0100 Subject: [PATCH] Dev: Output a warning if html tidy is not installed - I just updated my PHP and HTML Tidy was not installed which resulted in the examples in the dist repo all being rewritten unfortunately. This should stop that happening again. --- .datatables-commit-sync | 2 +- examples/advanced_init/column_render.html | 1055 ++++++++-- examples/advanced_init/complex_header.html | 1066 ++++++++-- examples/advanced_init/defaults.html | 1053 ++++++++-- .../advanced_init/dom_multiple_elements.html | 1057 ++++++++-- examples/advanced_init/dom_toolbar.html | 1060 ++++++++-- examples/advanced_init/dt_events.html | 1060 ++++++++-- examples/advanced_init/events_live.html | 1054 ++++++++-- examples/advanced_init/footer_callback.html | 994 +++++++-- .../advanced_init/html5-data-attributes.html | 1067 ++++++++-- .../advanced_init/html5-data-options.html | 1546 ++++++++------ examples/advanced_init/index.html | 155 +- examples/advanced_init/language_file.html | 1053 ++++++++-- examples/advanced_init/length_menu.html | 1062 ++++++++-- examples/advanced_init/object_dom_read.html | 1083 ++++++++-- examples/advanced_init/row_callback.html | 1054 ++++++++-- examples/advanced_init/row_grouping.html | 1054 ++++++++-- .../advanced_init/sort_direction_control.html | 1072 ++++++++-- examples/ajax/custom_data_flat.html | 610 ++++-- examples/ajax/custom_data_property.html | 613 ++++-- examples/ajax/deep.html | 628 ++++-- examples/ajax/defer_render.html | 601 ++++-- examples/ajax/index.html | 126 +- examples/ajax/null_data_source.html | 614 ++++-- examples/ajax/objects.html | 622 ++++-- examples/ajax/objects_subarrays.html | 644 ++++-- examples/ajax/orthogonal-data.html | 625 ++++-- examples/ajax/simple.html | 627 ++++-- examples/api/add_row.html | 603 ++++-- examples/api/api_in_init.html | 1061 ++++++++-- examples/api/counter_columns.html | 1057 ++++++++-- examples/api/form.html | 1852 ++++++++++++++-- examples/api/highlight.html | 1055 ++++++++-- examples/api/index.html | 138 +- examples/api/multi_filter.html | 1063 ++++++++-- examples/api/multi_filter_select.html | 1072 ++++++++-- examples/api/regex.html | 1169 ++++++++--- examples/api/row_details.html | 596 ++++-- examples/api/select_row.html | 1054 ++++++++-- examples/api/select_single_row.html | 1059 ++++++++-- examples/api/show_hide.html | 1071 ++++++++-- examples/api/tabs_and_scrolling.html | 671 ++++-- examples/basic_init/alt_pagination.html | 1078 ++++++++-- examples/basic_init/comma-decimal.html | 1064 ++++++++-- examples/basic_init/complex_header.html | 1060 ++++++++-- examples/basic_init/dom.html | 1162 ++++++++--- examples/basic_init/filter_only.html | 1048 ++++++++-- examples/basic_init/flexible_width.html | 1054 ++++++++-- examples/basic_init/hidden_columns.html | 1061 ++++++++-- examples/basic_init/index.html | 154 +- examples/basic_init/language.html | 1051 ++++++++-- examples/basic_init/multi_col_sort.html | 1003 +++++++-- examples/basic_init/multiple_tables.html | 768 +++++-- examples/basic_init/scroll_x.html | 1218 +++++++++-- examples/basic_init/scroll_xy.html | 1212 +++++++++-- examples/basic_init/scroll_y.html | 1060 ++++++++-- examples/basic_init/scroll_y_dynamic.html | 1054 ++++++++-- examples/basic_init/state_save.html | 1065 ++++++++-- examples/basic_init/table_sorting.html | 1058 ++++++++-- examples/basic_init/zero_configuration.html | 1051 ++++++++-- examples/data_sources/ajax.html | 600 ++++-- examples/data_sources/dom.html | 1052 ++++++++-- examples/data_sources/index.html | 118 +- examples/data_sources/js_array.html | 577 +++-- examples/data_sources/server_side.html | 601 ++++-- examples/index.html | 469 +++-- examples/plug-ins/api.html | 1058 ++++++++-- examples/plug-ins/dom_sort.html | 1854 +++++++++++++++-- examples/plug-ins/index.html | 110 +- examples/plug-ins/range_filtering.html | 1071 ++++++++-- examples/plug-ins/sorting_auto.html | 1059 ++++++++-- examples/plug-ins/sorting_manual.html | 1061 ++++++++-- examples/server_side/custom_vars.html | 603 ++++-- examples/server_side/defer_loading.html | 761 ++++--- examples/server_side/ids.html | 599 ++++-- examples/server_side/index.html | 136 +- examples/server_side/jsonp.html | 602 ++++-- examples/server_side/object_data.html | 596 ++++-- examples/server_side/pipeline.html | 601 ++++-- examples/server_side/post.html | 601 ++++-- examples/server_side/row_details.html | 607 ++++-- examples/server_side/select_rows.html | 599 ++++-- examples/server_side/simple.html | 600 ++++-- examples/styling/bootstrap.html | 1065 ++++++++-- examples/styling/cell-border.html | 1047 ++++++++-- examples/styling/compact.html | 1048 ++++++++-- examples/styling/display.html | 1070 ++++++++-- examples/styling/foundation.html | 1066 ++++++++-- examples/styling/hover.html | 1048 ++++++++-- examples/styling/index.html | 135 +- examples/styling/jqueryUI.html | 1068 ++++++++-- examples/styling/no-classes.html | 1047 ++++++++-- examples/styling/order-column.html | 1048 ++++++++-- examples/styling/row-border.html | 1047 ++++++++-- examples/styling/stripe.html | 1047 ++++++++-- media/js/jquery.dataTables.js | 6 +- media/js/jquery.dataTables.min.js | 266 +-- 97 files changed, 65695 insertions(+), 17247 deletions(-) diff --git a/.datatables-commit-sync b/.datatables-commit-sync index ea659120..9da0025d 100644 --- a/.datatables-commit-sync +++ b/.datatables-commit-sync @@ -1 +1 @@ -b22e92021558eb1bfb221c71ab37c079ba925af0 +2c4420e7aa2a97ee195f8e6f1e847c7bfce87a9b diff --git a/examples/advanced_init/column_render.html b/examples/advanced_init/column_render.html index c0828778..451ab645 100644 --- a/examples/advanced_init/column_render.html +++ b/examples/advanced_init/column_render.html @@ -1,19 +1,26 @@ - + - - - - - - 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": [ { @@ -76,149 +560,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 7efe65db..c8b12e2e 100644 --- a/examples/advanced_init/complex_header.html +++ b/examples/advanced_init/complex_header.html @@ -1,19 +1,26 @@ - + - - - - - - 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, @@ -64,149 +551,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 7be668df..0b575fe8 100644 --- a/examples/advanced_init/defaults.html +++ b/examples/advanced_init/defaults.html @@ -1,19 +1,26 @@ - + - - - - - - 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 } ); @@ -62,149 +544,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 42968eec..cebe5f1e 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:

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
+
+

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-2015
+ 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 01894e19..507f6351 100644 --- a/examples/advanced_init/dom_toolbar.html +++ b/examples/advanced_init/dom_toolbar.html @@ -1,25 +1,32 @@ - + - - - - - - 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 'toolbar' is created using dom, with which HTML is inserted to create the toolbar. You could put whatever HTML you want into the toolbar and add event handlers etc.

- -

For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in API available, which can be used to create plug-ins which are used in a table by a single character reference in the 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).

- -

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

- -
- - -
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 'toolbar' is created using dom, with which HTML is inserted to create the + toolbar. You could put whatever HTML you want into the toolbar and add event handlers etc.

+

For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in API available, which can be used to create plug-ins which + are used in a table by a single character reference in the 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).

+

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

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
+
+

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-2015
+ 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 5a7afd03..f1e6e38c 100644 --- a/examples/advanced_init/dt_events.html +++ b/examples/advanced_init/dt_events.html @@ -1,19 +1,26 @@ - + - - - - - - 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>'; @@ -72,149 +557,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 1be15259..243fae48 100644 --- a/examples/advanced_init/events_live.html +++ b/examples/advanced_init/events_live.html @@ -1,19 +1,26 @@ - + - - - - - - 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 () { @@ -60,149 +543,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 b8f4d7da..ae7ab159 100644 --- a/examples/advanced_init/footer_callback.html +++ b/examples/advanced_init/footer_callback.html @@ -1,21 +1,28 @@ - + - - - - - - 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; @@ -118,149 +541,354 @@ $(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; } -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 53ee2cfe..7e315419 100644 --- a/examples/advanced_init/html5-data-attributes.html +++ b/examples/advanced_init/html5-data-attributes.html @@ -1,205 +1,894 @@ - + - - - - - - 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
    • -
- -

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

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-2015
+ 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 ec9ed4d3..397baa9f 100644 --- a/examples/advanced_init/html5-data-options.html +++ b/examples/advanced_init/html5-data-options.html @@ -1,683 +1,893 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 5c3a5d46..b47e3a10 100644 --- a/examples/advanced_init/index.html +++ b/examples/advanced_init/index.html @@ -1,65 +1,100 @@ - + - - - - - - - - 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 examples - 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-2015
- DataTables is licensed under the MIT license. -

-
-
+

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

+ +
+
+
+

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-2015
+ 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 6e6b5553..2ff2dc3e 100644 --- a/examples/advanced_init/language_file.html +++ b/examples/advanced_init/language_file.html @@ -1,19 +1,26 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 8e951a6a..45cb9169 100644 --- a/examples/advanced_init/length_menu.html +++ b/examples/advanced_init/length_menu.html @@ -1,19 +1,26 @@ - + - - - - - - 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').
    • -
- -

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

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-2015
+ 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 5e7a8538..07374cbe 100644 --- a/examples/advanced_init/object_dom_read.html +++ b/examples/advanced_init/object_dom_read.html @@ -1,19 +1,26 @@ - + - - - - - - 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" }, @@ -84,149 +566,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 f520a03e..8420f461 100644 --- a/examples/advanced_init/row_callback.html +++ b/examples/advanced_init/row_callback.html @@ -1,24 +1,31 @@ - + - - - - - - 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 $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() { + + + +
+
+

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 ) { @@ -67,152 +550,357 @@ $(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:

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
+
+

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-2015
+ 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 33184046..7cde6c5a 100644 --- a/examples/advanced_init/row_grouping.html +++ b/examples/advanced_init/row_grouping.html @@ -1,24 +1,31 @@ - + - - - - - - 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 } @@ -119,152 +602,357 @@ $(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:

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
+
+

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-2015
+ 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 00a03f47..1976e8f1 100644 --- a/examples/advanced_init/sort_direction_control.html +++ b/examples/advanced_init/sort_direction_control.html @@ -1,19 +1,26 @@ - + - - - - - - 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
    • -
- -

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

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-2015
+ 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 fd853221..7bedd973 100644 --- a/examples/ajax/custom_data_flat.html +++ b/examples/ajax/custom_data_flat.html @@ -1,19 +1,26 @@ - + - - - - - - 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.
    • -
- -

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

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-2015
+ 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 aa14ef22..2ed5d05f 100644 --- a/examples/ajax/custom_data_property.html +++ b/examples/ajax/custom_data_property.html @@ -1,19 +1,26 @@ - + - - - - - - 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.
    • -
- -

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

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-2015
+ DataTables is licensed under the MIT license.

+
+
+
+
+ \ No newline at end of file diff --git a/examples/ajax/deep.html b/examples/ajax/deep.html index a58ef736..7f2f9758 100644 --- a/examples/ajax/deep.html +++ b/examples/ajax/deep.html @@ -1,19 +1,26 @@ - + - - - - - - DataTables example - Nested object data (objects) - - - - - + + + + - - -
-
-

DataTables example Nested object data (objects)

-
-

DataTables has the ability to use data from almost data JSON data source through the use of the columns.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 data 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", @@ -86,149 +113,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 ba0790d7..51eae7a1 100644 --- a/examples/ajax/defer_render.html +++ b/examples/ajax/defer_render.html @@ -1,19 +1,26 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 2b502004..0cdf1225 100644 --- a/examples/ajax/index.html +++ b/examples/ajax/index.html @@ -1,58 +1,78 @@ - + - - - - - - - - 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 examples - Ajax sourced data + + +
-
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
-
+

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

+ +
+
+
+

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-2015
+ 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 b98eb860..a48fb3ff 100644 --- a/examples/ajax/null_data_source.html +++ b/examples/ajax/null_data_source.html @@ -1,19 +1,26 @@ - + - - - - - - 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:

- - - -

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

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-2015
+ 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 e5a9429c..69e7d8ac 100644 --- a/examples/ajax/objects.html +++ b/examples/ajax/objects.html @@ -1,19 +1,26 @@ - + - - - - - - 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": [ @@ -82,149 +107,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 ac60871f..cc1eb92e 100644 --- a/examples/ajax/objects_subarrays.html +++ b/examples/ajax/objects_subarrays.html @@ -1,19 +1,26 @@ - + - - - - - - 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"
-}
-
- -
- - -
NamePositionOfficeExtn.Start dateSalary
NamePositionOfficeExtn.Start dateSalary
- -
+
+
+
+
+

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-2015
+ 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 edab8a7e..9f0d81b6 100644 --- a/examples/ajax/orthogonal-data.html +++ b/examples/ajax/orthogonal-data.html @@ -1,19 +1,26 @@ - + - - - - - - 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: [ @@ -89,149 +115,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 3d3a7cbc..379a7f28 100644 --- a/examples/ajax/simple.html +++ b/examples/ajax/simple.html @@ -1,216 +1,447 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 18a9a88b..3897e879 100644 --- a/examples/api/add_row.html +++ b/examples/api/add_row.html @@ -1,19 +1,26 @@ - + - - - - - - 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; @@ -86,149 +110,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 c1eae579..7fc8e29f 100644 --- a/examples/api/api_in_init.html +++ b/examples/api/api_in_init.html @@ -1,19 +1,26 @@ - + - - - - - - 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(); @@ -66,149 +552,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 99461ffb..d3ff417c 100644 --- a/examples/api/counter_columns.html +++ b/examples/api/counter_columns.html @@ -1,19 +1,26 @@ - + - - - - - - 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, @@ -76,149 +562,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 023e52b1..75581f3a 100644 --- a/examples/api/form.html +++ b/examples/api/form.html @@ -1,19 +1,26 @@ - + - - - - - - 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.

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

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
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() { @@ -70,149 +1347,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 a8ec8dfa..7de9a745 100644 --- a/examples/api/highlight.html +++ b/examples/api/highlight.html @@ -1,25 +1,32 @@ - + - - - - - - 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 lastIdx = null; var table = $('#example').DataTable(); @@ -84,151 +568,356 @@ $(document).ready(function() { $( table.cells().nodes() ).removeClass( '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:

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
+
+

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-2015
+ 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 02755e77..257cd44e 100644 --- a/examples/api/index.html +++ b/examples/api/index.html @@ -1,60 +1,88 @@ - + - - - - - - - - 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 examples - 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-2015
- DataTables is licensed under the MIT license. -

-
-
+

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

+ +
+
+
+

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-2015
+ 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 113ed24d..114eb885 100644 --- a/examples/api/multi_filter.html +++ b/examples/api/multi_filter.html @@ -1,25 +1,32 @@ - + - - - - - - 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 = $('#example thead th').eq( $(this).index() ).text(); @@ -100,153 +584,358 @@ $(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:

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
+
+

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-2015
+ 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 53aec724..a8c0719a 100644 --- a/examples/api/multi_filter_select.html +++ b/examples/api/multi_filter_select.html @@ -1,19 +1,26 @@ - + - - - - - - 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 () { @@ -96,149 +589,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 e248e323..3c6ef7d5 100644 --- a/examples/api/regex.html +++ b/examples/api/regex.html @@ -1,19 +1,26 @@ - + - - - - - - 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'), @@ -155,149 +639,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 c4822966..77d3c808 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;">'+ @@ -160,155 +185,360 @@ $(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:

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
+
+

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-2015
+ 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 36c5fe85..64482251 100644 --- a/examples/api/select_row.html +++ b/examples/api/select_row.html @@ -1,19 +1,26 @@ - + - - - - - - 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 () { @@ -66,149 +549,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 9a36516b..21a546de 100644 --- a/examples/api/select_single_row.html +++ b/examples/api/select_single_row.html @@ -1,19 +1,26 @@ - + - - - - - - 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 () { @@ -80,149 +564,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 f6f6257d..4c8d6c5a 100644 --- a/examples/api/show_hide.html +++ b/examples/api/show_hide.html @@ -1,19 +1,26 @@ - + - - - - - - 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 @@ -86,149 +566,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 3a195c15..26262b79 100644 --- a/examples/api/tabs_and_scrolling.html +++ b/examples/api/tabs_and_scrolling.html @@ -1,19 +1,31 @@ - + - - - - - - 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
-
-
-
- -
+
+
+
+
+

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-2015
+ 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 4cfed2aa..d1a80e4b 100644 --- a/examples/basic_init/alt_pagination.html +++ b/examples/basic_init/alt_pagination.html @@ -1,214 +1,900 @@ - + - - - - - - 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
    • -
- -

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

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-2015
+ 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 24512708..f47bff36 100644 --- a/examples/basic_init/comma-decimal.html +++ b/examples/basic_init/comma-decimal.html @@ -1,19 +1,26 @@ - + - - - - - - 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": ",", @@ -62,149 +547,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 eb65e379..0abecae2 100644 --- a/examples/basic_init/complex_header.html +++ b/examples/basic_init/complex_header.html @@ -1,198 +1,888 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 d1cf37aa..15ec2729 100644 --- a/examples/basic_init/dom.html +++ b/examples/basic_init/dom.html @@ -1,255 +1,943 @@ - + - - - - - - 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
    • -
- -

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

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-2015
+ 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 7caafc3a..bb1d2dd5 100644 --- a/examples/basic_init/filter_only.html +++ b/examples/basic_init/filter_only.html @@ -1,19 +1,26 @@ - + - - - - - - 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. In the following example only the filter feature is left enabled (which is enabled 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. In the following example + only the filter feature is left enabled (which is enabled 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 2dc8465e..f8a5e89d 100644 --- a/examples/basic_init/flexible_width.html +++ b/examples/basic_init/flexible_width.html @@ -1,202 +1,890 @@ - + - - - - - - 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:

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
+
+

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-2015
+ 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 e4fe1544..959f3fcc 100644 --- a/examples/basic_init/hidden_columns.html +++ b/examples/basic_init/hidden_columns.html @@ -1,19 +1,26 @@ - + - - - - - - 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": [ { @@ -76,149 +558,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 4342b92a..aa168c9a 100644 --- a/examples/basic_init/index.html +++ b/examples/basic_init/index.html @@ -1,64 +1,100 @@ - + - - - - - - - - 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 examples - 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-2015
- DataTables is licensed under the MIT license. -

-
-
+

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

+ +
+
+
+

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-2015
+ 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 a6ef8da4..9dc832d5 100644 --- a/examples/basic_init/language.html +++ b/examples/basic_init/language.html @@ -1,19 +1,26 @@ - + - - - - - - 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", @@ -64,149 +544,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 e67e0e91..c2fb76fc 100644 --- a/examples/basic_init/multi_col_sort.html +++ b/examples/basic_init/multi_col_sort.html @@ -1,19 +1,26 @@ - + - - - - - - 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.
    • -
- -

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

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-2015
+ 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 804188ca..00067f74 100644 --- a/examples/basic_init/multiple_tables.html +++ b/examples/basic_init/multiple_tables.html @@ -1,204 +1,602 @@ - + - - - - - - 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:

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
+
+

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-2015
+ 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 b63e374f..d9f5a9f0 100644 --- a/examples/basic_init/scroll_x.html +++ b/examples/basic_init/scroll_x.html @@ -1,208 +1,1060 @@ - + - - - - - - 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:

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
+
+

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-2015
+ 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 23fc6052..974aaa89 100644 --- a/examples/basic_init/scroll_xy.html +++ b/examples/basic_init/scroll_xy.html @@ -1,24 +1,31 @@ - + - - - - - - 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:

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
+
+

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-2015
+ 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 913aa02f..4c000090 100644 --- a/examples/basic_init/scroll_y.html +++ b/examples/basic_init/scroll_y.html @@ -1,19 +1,26 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 fa558bef..10e9bc8c 100644 --- a/examples/basic_init/scroll_y_dynamic.html +++ b/examples/basic_init/scroll_y_dynamic.html @@ -1,19 +1,26 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 9544ee45..f781698a 100644 --- a/examples/basic_init/state_save.html +++ b/examples/basic_init/state_save.html @@ -1,204 +1,895 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 eb024fea..134c1067 100644 --- a/examples/basic_init/table_sorting.html +++ b/examples/basic_init/table_sorting.html @@ -1,202 +1,890 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 e5c306d0..c732db09 100644 --- a/examples/basic_init/zero_configuration.html +++ b/examples/basic_init/zero_configuration.html @@ -1,198 +1,883 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 f8f1eac1..e669514a 100644 --- a/examples/data_sources/ajax.html +++ b/examples/data_sources/ajax.html @@ -1,19 +1,26 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 e49f261c..5ab8d3a7 100644 --- a/examples/data_sources/dom.html +++ b/examples/data_sources/dom.html @@ -1,198 +1,884 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 2e5bc555..895f811f 100644 --- a/examples/data_sources/index.html +++ b/examples/data_sources/index.html @@ -1,60 +1,68 @@ - + - - - - - - - - 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 examples - 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-2015
- DataTables is licensed under the MIT license. -

-
-
+

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

+ +
+
+
+

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-2015
+ 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 04cd40f9..8a2c98d4 100644 --- a/examples/data_sources/js_array.html +++ b/examples/data_sources/js_array.html @@ -1,19 +1,26 @@ - + - - - - - - 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" ], @@ -148,149 +154,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 7a2206d7..e5bae7e6 100644 --- a/examples/data_sources/server_side.html +++ b/examples/data_sources/server_side.html @@ -1,19 +1,26 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ DataTables is licensed under the MIT license.

+
+
+
+
+ \ No newline at end of file diff --git a/examples/index.html b/examples/index.html index eda488a2..87bb2588 100644 --- a/examples/index.html +++ b/examples/index.html @@ -1,139 +1,340 @@ - + - - - - - - - - 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 examples - Examples index + + +
-
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
-
+

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-2015
+ 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 70e8d597..9020e715 100644 --- a/examples/plug-ins/api.html +++ b/examples/plug-ins/api.html @@ -1,19 +1,26 @@ - + - - - - - - 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; @@ -94,149 +577,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 8794a4c6..b8723773 100644 --- a/examples/plug-ins/dom_sort.html +++ b/examples/plug-ins/dom_sort.html @@ -1,19 +1,26 @@ - + - - - - - - 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 ) { @@ -132,149 +1411,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 2e01f687..2e8e1c42 100644 --- a/examples/plug-ins/index.html +++ b/examples/plug-ins/index.html @@ -1,54 +1,66 @@ - + - - - - - - - - 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 examples - 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-2015
- DataTables is licensed under the MIT license. -

-
-
+

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

+ +
+
+
+

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-2015
+ 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 d867d653..a8e53959 100644 --- a/examples/plug-ins/range_filtering.html +++ b/examples/plug-ins/range_filtering.html @@ -1,19 +1,26 @@ - + - - - - - - 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 ); @@ -105,149 +587,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 35c570f5..0c0399bb 100644 --- a/examples/plug-ins/sorting_auto.html +++ b/examples/plug-ins/sorting_auto.html @@ -1,19 +1,26 @@ - + - - - - - - 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' : @@ -90,149 +570,354 @@ $.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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 8158abed..d579892f 100644 --- a/examples/plug-ins/sorting_manual.html +++ b/examples/plug-ins/sorting_manual.html @@ -1,19 +1,26 @@ - + - - - - - - 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; @@ -82,149 +564,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ DataTables is licensed under the MIT license.

+
+
+
+
+ \ No newline at end of file diff --git a/examples/server_side/custom_vars.html b/examples/server_side/custom_vars.html index b0935ae4..5d710f8e 100644 --- a/examples/server_side/custom_vars.html +++ b/examples/server_side/custom_vars.html @@ -1,19 +1,26 @@ - + - - - - - - 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 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
- -
+
+
+
+
+

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-2015
+ 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 dd83aa75..08fbe50f 100644 --- a/examples/server_side/defer_loading.html +++ b/examples/server_side/defer_loading.html @@ -1,19 +1,26 @@ - + - - - - - - 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, @@ -139,149 +167,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 d42ee715..5dddd6e7 100644 --- a/examples/server_side/ids.html +++ b/examples/server_side/ids.html @@ -1,19 +1,26 @@ - + - - - - - - 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, @@ -74,149 +98,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 24fcd872..e646f54a 100644 --- a/examples/server_side/index.html +++ b/examples/server_side/index.html @@ -1,61 +1,85 @@ - + - - - - - - - - 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 examples - Server-side processing + + +
-
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
-
+

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

+ +
+
+
+

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-2015
+ 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 6a829bd7..919ceaa0 100644 --- a/examples/server_side/jsonp.html +++ b/examples/server_side/jsonp.html @@ -1,19 +1,26 @@ - + - - - - - - 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, @@ -64,149 +91,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 78cbc612..98e27c6b 100644 --- a/examples/server_side/object_data.html +++ b/examples/server_side/object_data.html @@ -1,19 +1,26 @@ - + - - - - - - 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, @@ -72,149 +97,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 f743efb2..2863c0a0 100644 --- a/examples/server_side/pipeline.html +++ b/examples/server_side/pipeline.html @@ -1,19 +1,26 @@ - + - - - - - - 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 ) { @@ -302,149 +328,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 49821da7..a5a96122 100644 --- a/examples/server_side/post.html +++ b/examples/server_side/post.html @@ -1,19 +1,26 @@ - + - - - - - - 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, @@ -81,149 +107,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 054340b6..c23f4adb 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.'; @@ -173,155 +201,360 @@ $(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:

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

-
+
+

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-2015
+ DataTables is licensed under the MIT license.

+
+
+
+
+ \ No newline at end of file diff --git a/examples/server_side/select_rows.html b/examples/server_side/select_rows.html index 16f60b27..89ed9619 100644 --- a/examples/server_side/select_rows.html +++ b/examples/server_side/select_rows.html @@ -1,19 +1,26 @@ - + - - - - - - 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({ @@ -100,149 +124,354 @@ $(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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 bdfbc99e..36a25c1c 100644 --- a/examples/server_side/simple.html +++ b/examples/server_side/simple.html @@ -1,19 +1,26 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 2fa5c969..39ca9a62 100644 --- a/examples/styling/bootstrap.html +++ b/examples/styling/bootstrap.html @@ -1,198 +1,893 @@ - + - - - - - - DataTables example - Bootstrap - - - - - + + + + + - - -
-
-

DataTables example Bootstrap

-
-

DataTables can integrate seamlessly with Bootstrap using Bootstrap's table styling options to present a consistent interface with your Bootstrap driven 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

+
+

DataTables can integrate seamlessly with Bootstrap using Bootstrap's table + styling options to present a consistent interface with your Bootstrap driven 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 d77b9356..7fc77ae8 100644 --- a/examples/styling/cell-border.html +++ b/examples/styling/cell-border.html @@ -1,194 +1,879 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 f48b14ad..98656ccd 100644 --- a/examples/styling/compact.html +++ b/examples/styling/compact.html @@ -1,194 +1,880 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 feeb2fce..15117398 100644 --- a/examples/styling/display.html +++ b/examples/styling/display.html @@ -1,207 +1,891 @@ - + - - - - - - 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
    • -
- -

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

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-2015
+ 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 cf31e856..5c5d970f 100644 --- a/examples/styling/foundation.html +++ b/examples/styling/foundation.html @@ -1,198 +1,894 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 9b9cff49..8a6b5342 100644 --- a/examples/styling/hover.html +++ b/examples/styling/hover.html @@ -1,194 +1,880 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 2ae7e77a..d3042d79 100644 --- a/examples/styling/index.html +++ b/examples/styling/index.html @@ -1,60 +1,85 @@ - + - - - - - - - - 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 examples - 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-2015
- DataTables is licensed under the MIT license. -

-
-
+

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

+ +
+
+
+

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-2015
+ 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 c3bb6880..ada831b0 100644 --- a/examples/styling/jqueryUI.html +++ b/examples/styling/jqueryUI.html @@ -1,198 +1,896 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 61aa2bf1..be37cf86 100644 --- a/examples/styling/no-classes.html +++ b/examples/styling/no-classes.html @@ -1,194 +1,879 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 7799c196..f069af2e 100644 --- a/examples/styling/order-column.html +++ b/examples/styling/order-column.html @@ -1,194 +1,880 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 a4b2eee2..0ad26dcc 100644 --- a/examples/styling/row-border.html +++ b/examples/styling/row-border.html @@ -1,194 +1,879 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ 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 659a4e04..9a81c96f 100644 --- a/examples/styling/stripe.html +++ b/examples/styling/stripe.html @@ -1,194 +1,879 @@ - + - - - - - - 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:

- -
- -

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.

-
+

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

+
-
- - -
- -
-
-
-
-

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-2015
- DataTables is licensed under the MIT license. -

+
+

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.

- +
+
+
+
+
+

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-2015
+ DataTables is licensed under the MIT license.

+
+
+
+
+ \ No newline at end of file diff --git a/media/js/jquery.dataTables.js b/media/js/jquery.dataTables.js index 09967fad..e052283a 100644 --- a/media/js/jquery.dataTables.js +++ b/media/js/jquery.dataTables.js @@ -34,10 +34,8 @@ define( 'datatables', ['jquery'], factory ); } else if ( typeof exports === 'object' ) { - module.exports = function ($) { - // Get jQuery if it wasn't passed in - return factory( $ || require( 'jquery' ) ); - }; + // Node/CommonJS + module.exports = factory( require( 'jquery' ) ); } else if ( jQuery && !jQuery.fn.dataTable ) { // Define using browser globals otherwise diff --git a/media/js/jquery.dataTables.min.js b/media/js/jquery.dataTables.min.js index a89abb2a..6b8d7733 100644 --- a/media/js/jquery.dataTables.min.js +++ b/media/js/jquery.dataTables.min.js @@ -2,163 +2,163 @@ DataTables 1.10.10-dev ©2008-2015 SpryMedia Ltd - datatables.net/license */ -(function(Fa,T,l){var S=function(g){function X(a){var b,c,d={};g.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]&&X(a[e])});a._hungarianMap=d}function H(a,b,c){a._hungarianMap||X(a);var d;g.each(b,function(e){d=a._hungarianMap[e];if(d!==l&&(c||b[d]===l))"o"===d.charAt(0)?(b[d]||(b[d]={}),g.extend(!0,b[d],b[e]),H(a[d],b[d],c)):b[d]=b[e]})}function S(a){var b=k.defaults.oLanguage,c=a.sZeroRecords; +(function(Fa,T,l){var S=function(h){function X(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]&&X(a[e])});a._hungarianMap=d}function H(a,b,c){a._hungarianMap||X(a);var d;h.each(b,function(e){d=a._hungarianMap[e];if(d!==l&&(c||b[d]===l))"o"===d.charAt(0)?(b[d]||(b[d]={}),h.extend(!0,b[d],b[e]),H(a[d],b[d],c)):b[d]=b[e]})}function S(a){var b=k.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)&&cb(a)}function db(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(g("
").css({position:"absolute",top:1,left:1,width:100,overflow:"scroll"}).append(g("
").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()}g.extend(a.oBrowser,k.__browser);a.oScroll.iBarWidth=k.__browser.barWidth}function gb(a,b,c,d,e,f){var h,i=!1;c!==l&&(h=c,i=!0);for(;d!==e;)a.hasOwnProperty(d)&&(h=i?b(h,a[d],d,a):a[d],i=!0,d+=f);return h}function Ga(a,b){var c=k.defaults.column,d=a.aoColumns.length,c=g.extend({},k.models.oColumn,c,{nTh:b?b:T.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]=g.extend({},k.models.oSearch,c[d]);la(a,d,g(b).data())}function la(a,b,c){var b=a.aoColumns[b],d=a.oClasses,e=g(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!==l&&null!==c&&(eb(c),H(k.defaults.column,c),c.mDataProp!==l&&!c.mData&&(c.mData=c.mDataProp),c.sType&&(b._sManualType=c.sType),c.className&&!c.sClass&&(c.sClass=c.className),g.extend(b,c),E(b,c,"sWidth","sWidthOrig"),c.iDataSort!== -l&&(b.aDataSort=[c.iDataSort]),E(b,c,"aDataSort"));var h=b.mData,i=P(h),j=b.mRender?P(b.mRender):null,c=function(a){return"string"===typeof a&&-1!==a.indexOf("@")};b._bAttrSrc=g.isPlainObject(h)&&(c(h.sort)||c(h.type)||c(h.filter));b.fnGetData=function(a,b,c){var d=i(a,b,l,c);return j&&b?j(d,b,a,c):d};b.fnSetData=function(a,b,c){return Q(h)(a,b,c)};"number"!==typeof h&&(a._rowReadObject=!0);a.oFeatures.bSort||(b.bSortable=!1,e.addClass(d.sSortableNone));a=-1!==g.inArray("asc",b.asSorting);c=-1!== -g.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 Y(a){if(!1!==a.oFeatures.bAutoWidth){var b=a.aoColumns;Ha(a);for(var c=0,d=b.length;cr[f])d(m.length+ -r[f],n);else if("string"===typeof r[f]){i=0;for(j=m.length;ib&&a[e]--; -1!=d&&c===l&&a.splice(d,1)}function ea(a,b,c,d){var e=a.aoData[b],f,h=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===l?l:e._aData).data;else{var i=e.anCells;if(i)if(d!==l)h(i[d],d);else{c=0;for(f=i.length;c").appendTo(h));b=0;for(c=m.length;btr").attr("role", -"row");g(h).find(">tr>th, >tr>td").addClass(n.sHeaderTH);g(i).find(">tr>th, >tr>td").addClass(n.sFooterTH);if(null!==i){a=a.aoFooter[0];b=0;for(c=a.length;b=a.fnRecordsDisplay()?0:h,a.iInitDisplayStart=-1);var h=a._iDisplayStart,n=a.fnDisplayEnd();if(a.bDeferLoading)a.bDeferLoading=!1,a.iDraw++,C(a,!1);else if(i){if(!a.bDestroying&&!kb(a))return}else a.iDraw++;if(0!==j.length){f=i?a.aoData.length:n;for(i=i?0:h;i",{"class":e?d[0]:""}).append(g("",{valign:"top",colSpan:ca(a),"class":a.oClasses.sRowEmpty}).html(c))[0];w(a,"aoHeaderCallback","header",[g(a.nTHead).children("tr")[0],Ma(a),h,n,j]);w(a,"aoFooterCallback","footer",[g(a.nTFoot).children("tr")[0],Ma(a),h,n,j]);d=g(a.nTBody);d.children().detach();d.append(g(b));w(a,"aoDrawCallback","draw", -[a]);a.bSorted=!1;a.bFiltered=!1;a.bDrawing=!1}}function R(a,b){var c=a.oFeatures,d=c.bFilter;c.bSort&&lb(a);d?ha(a,a.oPreviousSearch):a.aiDisplay=a.aiDisplayMaster.slice();!0!==b&&(a._iDisplayStart=0);a._drawHold=b;M(a);a._drawHold=!1}function mb(a){var b=a.oClasses,c=g(a.nTable),c=g("
").insertBefore(c),d=a.oFeatures,e=g("
",{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(""),h,i,j,n,m,r,q=0;q")[0];n=f[q+1];if("'"==n||'"'==n){m="";for(r=2;f[q+r]!=n;)m+=f[q+r],r++;"H"==m?m=b.sJUIHeader:"F"==m&&(m=b.sJUIFooter);-1!=m.indexOf(".")?(n=m.split("."),j.id=n[0].substr(1,n[0].length-1),j.className=n[1]):"#"==m.charAt(0)?j.id=m.substr(1,m.length-1):j.className=m;q+=r}e.append(j);e=g(j)}else if(">"==i)e=e.parent();else if("l"==i&&d.bPaginate&&d.bLengthChange)h=nb(a);else if("f"==i&&d.bFilter)h=ob(a);else if("r"== -i&&d.bProcessing)h=pb(a);else if("t"==i)h=qb(a);else if("i"==i&&d.bInfo)h=rb(a);else if("p"==i&&d.bPaginate)h=sb(a);else if(0!==k.ext.feature.length){j=k.ext.feature;r=0;for(n=j.length;r").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,k.__browser);a.oScroll.iBarWidth=k.__browser.barWidth}function gb(a,b,c,d,e,f){var g,i=!1;c!==l&&(g=c,i=!0);for(;d!==e;)a.hasOwnProperty(d)&&(g=i?b(g,a[d],d,a):a[d],i=!0,d+=f);return g}function Ga(a,b){var c=k.defaults.column,d=a.aoColumns.length,c=h.extend({},k.models.oColumn,c,{nTh:b?b:T.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({},k.models.oSearch,c[d]);la(a,d,h(b).data())}function la(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!==l&&null!==c&&(eb(c),H(k.defaults.column,c),c.mDataProp!==l&&!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!== +l&&(b.aDataSort=[c.iDataSort]),E(b,c,"aDataSort"));var g=b.mData,i=P(g),j=b.mRender?P(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.fnGetData=function(a,b,c){var d=i(a,b,l,c);return j&&b?j(d,b,a,c):d};b.fnSetData=function(a,b,c){return Q(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 Y(a){if(!1!==a.oFeatures.bAutoWidth){var b=a.aoColumns;Ha(a);for(var c=0,d=b.length;cr[f])d(m.length+ +r[f],n);else if("string"===typeof r[f]){i=0;for(j=m.length;ib&&a[e]--; -1!=d&&c===l&&a.splice(d,1)}function ea(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===l?l:e._aData).data;else{var i=e.anCells;if(i)if(d!==l)g(i[d],d);else{c=0;for(f=i.length;c").appendTo(g));b=0;for(c=m.length;btr").attr("role", +"row");h(g).find(">tr>th, >tr>td").addClass(n.sHeaderTH);h(i).find(">tr>th, >tr>td").addClass(n.sFooterTH);if(null!==i){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(i){if(!a.bDestroying&&!kb(a))return}else a.iDraw++;if(0!==j.length){f=i?a.aoData.length:n;for(i=i?0:g;i",{"class":e?d[0]:""}).append(h("",{valign:"top",colSpan:ca(a),"class":a.oClasses.sRowEmpty}).html(c))[0];w(a,"aoHeaderCallback","header",[h(a.nTHead).children("tr")[0],Ma(a),g,n,j]);w(a,"aoFooterCallback","footer",[h(a.nTFoot).children("tr")[0],Ma(a),g,n,j]);d=h(a.nTBody);d.children().detach();d.append(h(b));w(a,"aoDrawCallback","draw", +[a]);a.bSorted=!1;a.bFiltered=!1;a.bDrawing=!1}}function R(a,b){var c=a.oFeatures,d=c.bFilter;c.bSort&&lb(a);d?ha(a,a.oPreviousSearch):a.aiDisplay=a.aiDisplayMaster.slice();!0!==b&&(a._iDisplayStart=0);a._drawHold=b;M(a);a._drawHold=!1}function mb(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,i,j,n,m,r,q=0;q")[0];n=f[q+1];if("'"==n||'"'==n){m="";for(r=2;f[q+r]!=n;)m+=f[q+r],r++;"H"==m?m=b.sJUIHeader:"F"==m&&(m=b.sJUIFooter);-1!=m.indexOf(".")?(n=m.split("."),j.id=n[0].substr(1,n[0].length-1),j.className=n[1]):"#"==m.charAt(0)?j.id=m.substr(1,m.length-1):j.className=m;q+=r}e.append(j);e=h(j)}else if(">"==i)e=e.parent();else if("l"==i&&d.bPaginate&&d.bLengthChange)g=nb(a);else if("f"==i&&d.bFilter)g=ob(a);else if("r"== +i&&d.bProcessing)g=pb(a);else if("t"==i)g=qb(a);else if("i"==i&&d.bInfo)g=rb(a);else if("p"==i&&d.bPaginate)g=sb(a);else if(0!==k.ext.feature.length){j=k.ext.feature;r=0;for(n=j.length;r',i=d.sSearch,i=i.match(/_INPUT_/)?i.replace("_INPUT_",h):i+h,b=g("
",{id:!f.f?c+"_filter": -null,"class":b.sFilter}).append(g("
").addClass(b.sLength);a.aanFeatures.l||(j[0].id=c+"_length");j.children().append(a.oLanguage.sLengthMenu.replace("_MENU_",e[0].outerHTML));g("select",j).val(a._iDisplayLength).bind("change.DT",function(){Ra(a,g(this).val());M(a)});g(a.nTable).bind("length.dt.DT",function(b,c,d){a===c&&g("select",j).val(d)});return j[0]}function sb(a){var b=a.sPaginationType, -c=k.ext.pager[b],d="function"===typeof c,e=function(a){M(a)},b=g("
").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,j=a._iDisplayLength,g=a.fnRecordsDisplay(),m=-1===j,b=m?0:Math.ceil(b/j),j=m?1:Math.ceil(g/j),g=c(b,j),l,m=0;for(l=f.p.length;mf&&(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&&g(a.aanFeatures.r).css("display",b?"block":"none");w(a,null,"processing",[a,b])}function qb(a){var b=g(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,h=b.children("caption"),i=h.length?h[0]._captionSide:null,j=g(b[0].cloneNode(!1)),n=g(b[0].cloneNode(!1)),m=b.children("tfoot");c.sX&&"100%"===b.attr("width")&&b.removeAttr("width");m.length||(m=null);j=g("
",{"class":f.sScrollWrapper}).append(g("
", -{"class":f.sScrollHead}).css({overflow:"hidden",position:"relative",border:0,width:d?!d?null:t(d):"100%"}).append(g("
",{"class":f.sScrollHeadInner}).css({"box-sizing":"content-box",width:c.sXInner||"100%"}).append(j.removeAttr("id").css("margin-left",0).append("top"===i?h:null).append(b.children("thead"))))).append(g("
",{"class":f.sScrollBody}).css({position:"relative",overflow:"auto",width:!d?null:t(d)}).append(b));m&&j.append(g("
",{"class":f.sScrollFoot}).css({overflow:"hidden", -border:0,width:d?!d?null:t(d):"100%"}).append(g("
",{"class":f.sScrollFootInner}).append(n.removeAttr("id").css("margin-left",0).append("bottom"===i?h:null).append(b.children("tfoot")))));var b=j.children(),l=b[0],f=b[1],q=m?b[2]:null;if(d)g(f).on("scroll.DT",function(){var a=this.scrollLeft;l.scrollLeft=a;m&&(q.scrollLeft=a)});g(f).css(e&&c.bCollapse?"max-height":"height",e);a.nScrollHead=l;a.nScrollBody=f;a.nScrollFoot=q;a.aoDrawCallback.push({fn:Z,sName:"scrolling"});return j[0]}function Z(a){var b= -a.oScroll,c=b.sX,d=b.sXInner,e=b.sY,b=b.iBarWidth,f=g(a.nScrollHead),h=f[0].style,i=f.children("div"),j=i[0].style,n=i.children("table"),i=a.nScrollBody,m=g(i),l=i.style,q=g(a.nScrollFoot).children("div"),J=q.children("table"),o=g(a.nTHead),k=g(a.nTable),p=k[0],s=p.style,N=a.nTFoot?g(a.nTFoot):null,Db=a.oBrowser,w=Db.bScrollOversize,u,v,O,x,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};k.children("thead, tfoot").remove(); -x=o.clone().prependTo(k);o=o.find("tr");v=x.find("tr");x.find("th, td").removeAttr("tabindex");N&&(O=N.clone().prependTo(k),u=N.find("tr"),O=O.find("tr"));c||(l.width="100%",f[0].style.width="100%");g.each(qa(a,x),function(b,c){B=$(a,b);c.style.width=a.aoColumns[B].sWidth});N&&G(function(a){a.style.width=""},O);f=k.outerWidth();if(""===c){s.width="100%";if(w&&(k.find("tbody").height()>i.offsetHeight||"scroll"==m.css("overflow-y")))s.width=t(k.outerWidth()-b);f=k.outerWidth()}else""!==d&&(s.width= -t(d),f=k.outerWidth());G(C,v);G(function(a){A.push(a.innerHTML);y.push(t(g(a).css("width")))},v);G(function(a,b){a.style.width=y[b]},o);g(v).height(0);N&&(G(C,O),G(function(a){z.push(t(g(a).css("width")))},O),G(function(a,b){a.style.width=z[b]},u),g(O).height(0));G(function(a,b){a.innerHTML='
'+A[b]+"
";a.style.width=y[b]},v);N&&G(function(a,b){a.innerHTML="";a.style.width=z[b]},O);if(k.outerWidth()i.offsetHeight|| -"scroll"==m.css("overflow-y")?f+b:f;if(w&&(i.scrollHeight>i.offsetHeight||"scroll"==m.css("overflow-y")))s.width=t(u-b);(""===c||""!==d)&&I(a,1,"Possible column misalignment",6)}else u="100%";l.width=t(u);h.width=t(u);N&&(a.nScrollFoot.style.width=t(u));!e&&w&&(l.height=t(p.offsetHeight+b));c=k.outerWidth();n[0].style.width=t(c);j.width=t(c);d=k.height()>i.clientHeight||"scroll"==m.css("overflow-y");e="padding"+(Db.bScrollbarLeft?"Left":"Right");j[e]=d?b+"px":"0px";N&&(J[0].style.width=t(c),q[0].style.width= -t(c),q[0].style[e]=d?b+"px":"0px");m.scroll();if((a.bSorted||a.bFiltered)&&!a._drawHold)i.scrollTop=0}function G(a,b,c){for(var d=0,e=0,f=b.length,h,i;e").appendTo(i.find("tbody"));i.find("thead, tfoot").remove();i.append(g(a.nTHead).clone()).append(g(a.nTFoot).clone());i.find("tfoot th, tfoot td").css("width",""); -n=qa(a,i.find("thead")[0]);for(k=0;k").css(f||e?{position:"absolute",top:0,left:0,height:1,right:0,overflow:"hidden"}:{}).append(i).appendTo(l);f&&h?i.width(h):f?(i.css("width","auto"),i.width()").css("width",t(a)).appendTo(b||T.body),d=c[0].offsetWidth;c.remove();return d}function Fb(a,b){var c=Gb(a,b);if(0>c)return null;var d=a.aoData[c];return!d.nTr?g("").html(B(a,c,b,"display"))[0]:d.anCells[b]}function Gb(a,b){for(var c,d=-1,e=-1,f=0,h=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 V(a){var b,c,d=[],e=a.aoColumns,f,h,i,j;b=a.aaSortingFixed;c=g.isPlainObject(b);var n=[];f=function(a){a.length&&!g.isArray(a[0])?n.push(a):g.merge(n,a)};g.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"===i.dir?c:-c;c=d[a];e=d[b];return ce?1:0}):g.sort(function(a,b){var c,h,i,g,j=n.length,l=f[a]._aSortData,k=f[b]._aSortData;for(i=0;ih?1:0})}a.bSorted=!0}function Ib(a){for(var b,c,d=a.aoColumns,e=V(a),a=a.oLanguage.oAria,f=0,h=d.length;f/g,"");var g=c.nTh;g.removeAttribute("aria-sort"); -c.bSortable&&(0e?e+1:3));e=0;for(f=d.length;ee?e+1:3))}a.aLastSort=d}function Hb(a,b){var c=a.aoColumns[b],d=k.ext.order[c.sSortDataType],e;d&&(e=d.call(a.oInstance,a,b,ba(a,b)));for(var f,h=k.ext.type.order[c.sType+"-pre"],i=0,g=a.aoData.length;i=d.length?[0,c[1]]: -c)}));e.search!==l&&g.extend(a.oPreviousSearch,Ab(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=k.ext.renderer[b];return g.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=Lb.numbers_length,d=Math.floor(c/2);b<=c?c=W(0,b):a<=d?(c=W(0,c-2),c.push("ellipsis"),c.push(b-1)):(a>=b-1-d?c=W(b-(c-2),b):(c=W(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 cb(a){g.each({num:function(b){return Ba(b,a)},"num-fmt":function(b){return Ba(b,a,Wa)},"html-num":function(b){return Ba(b,a,Ca)},"html-num-fmt":function(b){return Ba(b,a,Ca,Wa)}},function(b,c){v.type.order[b+a+"-pre"]=c;b.match(/^html\-/)&&(v.type.search[b+a]=v.type.search.html)})}function Mb(a){return function(){var b=[za(this[k.ext.iApiIndex])].concat(Array.prototype.slice.call(arguments));return k.ext.internal[a].apply(this, +c[d]);a.aiDisplay=a.aiDisplayMaster.slice();a.bAjaxDataGet=!1;M(a);a._bInitComplete||ta(a,b);a.bAjaxDataGet=!0;C(a,!1)}function sa(a,b){var c=h.isPlainObject(a.ajax)&&a.ajax.dataSrc!==l?a.ajax.dataSrc:a.sAjaxDataProp;return"data"===c?b.aaData||b[c]:""!==c?P(c)(b):b}function ob(a){var b=a.oClasses,c=a.sTableId,d=a.oLanguage,e=a.oPreviousSearch,f=a.aanFeatures,g='',i=d.sSearch,i=i.match(/_INPUT_/)?i.replace("_INPUT_",g):i+g,b=h("
",{id:!f.f?c+"_filter": +null,"class":b.sFilter}).append(h("
").addClass(b.sLength);a.aanFeatures.l||(j[0].id=c+"_length");j.children().append(a.oLanguage.sLengthMenu.replace("_MENU_",e[0].outerHTML));h("select",j).val(a._iDisplayLength).bind("change.DT",function(){Ra(a,h(this).val());M(a)});h(a.nTable).bind("length.dt.DT",function(b,c,d){a===c&&h("select",j).val(d)});return j[0]}function sb(a){var b=a.sPaginationType, +c=k.ext.pager[b],d="function"===typeof c,e=function(a){M(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,j=a._iDisplayLength,h=a.fnRecordsDisplay(),m=-1===j,b=m?0:Math.ceil(b/j),j=m?1:Math.ceil(h/j),h=c(b,j),l,m=0;for(l=f.p.length;mf&&(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");w(a,null,"processing",[a,b])}function qb(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"),i=g.length?g[0]._captionSide:null,j=h(b[0].cloneNode(!1)),n=h(b[0].cloneNode(!1)),m=b.children("tfoot");c.sX&&"100%"===b.attr("width")&&b.removeAttr("width");m.length||(m=null);j=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(j.removeAttr("id").css("margin-left",0).append("top"===i?g:null).append(b.children("thead"))))).append(h("
",{"class":f.sScrollBody}).css({position:"relative",overflow:"auto",width:!d?null:t(d)}).append(b));m&&j.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"===i?g:null).append(b.children("tfoot")))));var b=j.children(),l=b[0],f=b[1],q=m?b[2]:null;if(d)h(f).on("scroll.DT",function(){var a=this.scrollLeft;l.scrollLeft=a;m&&(q.scrollLeft=a)});h(f).css(e&&c.bCollapse?"max-height":"height",e);a.nScrollHead=l;a.nScrollBody=f;a.nScrollFoot=q;a.aoDrawCallback.push({fn:Z,sName:"scrolling"});return j[0]}function Z(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,i=f.children("div"),j=i[0].style,n=i.children("table"),i=a.nScrollBody,m=h(i),l=i.style,q=h(a.nScrollFoot).children("div"),J=q.children("table"),o=h(a.nTHead),k=h(a.nTable),p=k[0],s=p.style,N=a.nTFoot?h(a.nTFoot):null,Db=a.oBrowser,w=Db.bScrollOversize,u,v,O,x,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};k.children("thead, tfoot").remove(); +x=o.clone().prependTo(k);o=o.find("tr");v=x.find("tr");x.find("th, td").removeAttr("tabindex");N&&(O=N.clone().prependTo(k),u=N.find("tr"),O=O.find("tr"));c||(l.width="100%",f[0].style.width="100%");h.each(qa(a,x),function(b,c){B=$(a,b);c.style.width=a.aoColumns[B].sWidth});N&&G(function(a){a.style.width=""},O);f=k.outerWidth();if(""===c){s.width="100%";if(w&&(k.find("tbody").height()>i.offsetHeight||"scroll"==m.css("overflow-y")))s.width=t(k.outerWidth()-b);f=k.outerWidth()}else""!==d&&(s.width= +t(d),f=k.outerWidth());G(C,v);G(function(a){A.push(a.innerHTML);y.push(t(h(a).css("width")))},v);G(function(a,b){a.style.width=y[b]},o);h(v).height(0);N&&(G(C,O),G(function(a){z.push(t(h(a).css("width")))},O),G(function(a,b){a.style.width=z[b]},u),h(O).height(0));G(function(a,b){a.innerHTML='
'+A[b]+"
";a.style.width=y[b]},v);N&&G(function(a,b){a.innerHTML="";a.style.width=z[b]},O);if(k.outerWidth()i.offsetHeight|| +"scroll"==m.css("overflow-y")?f+b:f;if(w&&(i.scrollHeight>i.offsetHeight||"scroll"==m.css("overflow-y")))s.width=t(u-b);(""===c||""!==d)&&I(a,1,"Possible column misalignment",6)}else u="100%";l.width=t(u);g.width=t(u);N&&(a.nScrollFoot.style.width=t(u));!e&&w&&(l.height=t(p.offsetHeight+b));c=k.outerWidth();n[0].style.width=t(c);j.width=t(c);d=k.height()>i.clientHeight||"scroll"==m.css("overflow-y");e="padding"+(Db.bScrollbarLeft?"Left":"Right");j[e]=d?b+"px":"0px";N&&(J[0].style.width=t(c),q[0].style.width= +t(c),q[0].style[e]=d?b+"px":"0px");m.scroll();if((a.bSorted||a.bFiltered)&&!a._drawHold)i.scrollTop=0}function G(a,b,c){for(var d=0,e=0,f=b.length,g,i;e").appendTo(i.find("tbody"));i.find("thead, tfoot").remove();i.append(h(a.nTHead).clone()).append(h(a.nTFoot).clone());i.find("tfoot th, tfoot td").css("width",""); +n=qa(a,i.find("thead")[0]);for(k=0;k").css(f||e?{position:"absolute",top:0,left:0,height:1,right:0,overflow:"hidden"}:{}).append(i).appendTo(l);f&&g?i.width(g):f?(i.css("width","auto"),i.width()").css("width",t(a)).appendTo(b||T.body),d=c[0].offsetWidth;c.remove();return d}function Fb(a,b){var c=Gb(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 Gb(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 V(a){var b,c,d=[],e=a.aoColumns,f,g,i,j;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"===i.dir?c:-c;c=d[a];e=d[b];return ce?1:0}):j.sort(function(a,b){var c,g,i,j,l=h.length,k=f[a]._aSortData,p=f[b]._aSortData;for(i=0;ig?1:0})}a.bSorted=!0}function Ib(a){for(var b,c,d=a.aoColumns,e=V(a),a=a.oLanguage.oAria,f=0,g=d.length;f/g,"");var j=c.nTh;j.removeAttribute("aria-sort"); +c.bSortable&&(0e?e+1:3));e=0;for(f=d.length;ee?e+1:3))}a.aLastSort=d}function Hb(a,b){var c=a.aoColumns[b],d=k.ext.order[c.sSortDataType],e;d&&(e=d.call(a.oInstance,a,b,ba(a,b)));for(var f,g=k.ext.type.order[c.sType+"-pre"],i=0,h=a.aoData.length;i=d.length?[0,c[1]]: +c)}));e.search!==l&&h.extend(a.oPreviousSearch,Ab(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=k.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=Lb.numbers_length,d=Math.floor(c/2);b<=c?c=W(0,b):a<=d?(c=W(0,c-2),c.push("ellipsis"),c.push(b-1)):(a>=b-1-d?c=W(b-(c-2),b):(c=W(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 cb(a){h.each({num:function(b){return Ba(b,a)},"num-fmt":function(b){return Ba(b,a,Wa)},"html-num":function(b){return Ba(b,a,Ca)},"html-num-fmt":function(b){return Ba(b,a,Ca,Wa)}},function(b,c){v.type.order[b+a+"-pre"]=c;b.match(/^html\-/)&&(v.type.search[b+a]=v.type.search.html)})}function Mb(a){return function(){var b=[za(this[k.ext.iApiIndex])].concat(Array.prototype.slice.call(arguments));return k.ext.internal[a].apply(this, b)}}var k,v,s,p,u,Xa={},Nb=/[\r\n]/g,Ca=/<.*?>/g,$b=/^[\w\+\-]/,ac=/[\w\+\-]$/,Xb=RegExp("(\\/|\\.|\\*|\\+|\\?|\\||\\(|\\)|\\[|\\]|\\{|\\}|\\\\|\\$|\\^|\\-)","g"),Wa=/[',$£€¥%\u2009\u202F\u20BD\u20a9\u20BArfk]/gi,K=function(a){return!a||!0===a||"-"===a?!0:!1},Ob=function(a){var b=parseInt(a,10);return!isNaN(b)&&isFinite(a)?b:null},Pb=function(a,b){Xa[b]||(Xa[b]=RegExp(va(b),"g"));return"string"===typeof a&&"."!==b?a.replace(/\./g,"").replace(Xa[b],"."):a},Ya=function(a,b,c){var d="string"===typeof a; -if(K(a))return!0;b&&d&&(a=Pb(a,b));c&&d&&(a=a.replace(Wa,""));return!isNaN(parseFloat(a))&&isFinite(a)},Qb=function(a,b,c){return K(a)?!0:!(K(a)||"string"===typeof a)?null:Ya(a.replace(Ca,""),b,c)?!0:null},D=function(a,b,c){var d=[],e=0,f=a.length;if(c!==l)for(;e")[0],Yb=wa.textContent!==l,Zb=/<.*?>/g;k=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 s(za(this[v.iApiIndex])):new s(this)};this.fnAddData=function(a,b){var c=this.api(!0),d=g.isArray(a)&&(g.isArray(a[0])||g.isPlainObject(a[0]))?c.rows.add(a):c.row.add(a);(b===l||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===l||a?b.draw(!1):(""!==d.sX||""!==d.sY)&&Z(c)};this.fnClearTable=function(a){var b=this.api(!0).clear(); -(a===l||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],g=e.aoData[a[0][0]];a.remove();b&&b.call(this,e,g);(c===l||c)&&d.draw();return g};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,g){e=this.api(!0);null===b||b===l?e.search(a,c,d,g):e.column(b).search(a,c,d,g);e.draw()};this.fnGetData=function(a,b){var c= +if(K(a))return!0;b&&d&&(a=Pb(a,b));c&&d&&(a=a.replace(Wa,""));return!isNaN(parseFloat(a))&&isFinite(a)},Qb=function(a,b,c){return K(a)?!0:!(K(a)||"string"===typeof a)?null:Ya(a.replace(Ca,""),b,c)?!0:null},D=function(a,b,c){var d=[],e=0,f=a.length;if(c!==l)for(;e")[0],Yb=wa.textContent!==l,Zb=/<.*?>/g;k=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 s(za(this[v.iApiIndex])):new s(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===l||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===l||a?b.draw(!1):(""!==d.sX||""!==d.sY)&&Z(c)};this.fnClearTable=function(a){var b=this.api(!0).clear(); +(a===l||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===l||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===l?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!==l){var d=a.nodeName?a.nodeName.toLowerCase():"";return b!==l||"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!==l?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===l||b)&&c.draw(!1)};this.fnSetColumnVis=function(a,b,c){a=this.api(!0).column(a).visible(b);(c===l||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 g= -this.api(!0);c===l||null===c?g.row(b).data(a):g.cell(b,c).data(a);(e===l||e)&&g.columns.adjust();(d===l||d)&&g.draw();return 0};this.fnVersionCheck=v.fnVersionCheck;var b=this,c=a===l,d=this.length;c&&(a={});this.oApi=this.internal=v.internal;for(var e in k.ext.internal)e&&(this[e]=Mb(e));this.each(function(){var e={},e=1t<"F"ip>'),o.renderer)?g.isPlainObject(o.renderer)&&!o.renderer.header&&(o.renderer.header="jqueryui"):o.renderer="jqueryui":g.extend(j,k.ext.classes,e.oClasses);r.addClass(j.sTable);o.iInitDisplayStart===l&&(o.iInitDisplayStart= -e.iDisplayStart,o._iDisplayStart=e.iDisplayStart);null!==e.iDeferLoading&&(o.bDeferLoading=!0,h=g.isArray(e.iDeferLoading),o._iRecordsDisplay=h?e.iDeferLoading[0]:e.iDeferLoading,o._iRecordsTotal=h?e.iDeferLoading[1]:e.iDeferLoading);var s=o.oLanguage;g.extend(!0,s,e.oLanguage);""!==s.sUrl&&(g.ajax({dataType:"json",url:s.sUrl,success:function(a){S(a);H(m.oLanguage,a);g.extend(true,s,a);ia(o)},error:function(){ia(o)}}),n=!0);null===e.asStripeClasses&&(o.asStripeClasses=[j.sStripeOdd,j.sStripeEven]); -var h=o.asStripeClasses,u=r.children("tbody").find("tr").eq(0);-1!==g.inArray(!0,g.map(h,function(a){return u.hasClass(a)}))&&(g("tbody tr",this).removeClass(h.join(" ")),o.asDestroyStripes=h.slice());q=[];h=this.getElementsByTagName("thead");0!==h.length&&(fa(o.aoHeader,h[0]),q=qa(o));if(null===e.aoColumns){p=[];h=0;for(i=q.length;h").appendTo(this));o.nTHead=i[0];i=r.children("tbody");0===i.length&&(i=g("").appendTo(this));o.nTBody=i[0];i=r.children("tfoot"); -if(0===i.length&&0").appendTo(this);0===i.length||0===i.children().length?r.addClass(j.sNoFooter):0a?new s(b[a],this[a]):null},filter:function(a){var b=[];if(x.filter)b= -x.filter.call(this,a,this);else for(var c=0,d=this.length;ct<"F"ip>'),o.renderer)?h.isPlainObject(o.renderer)&&!o.renderer.header&&(o.renderer.header="jqueryui"):o.renderer="jqueryui":h.extend(j,k.ext.classes,e.oClasses);r.addClass(j.sTable);o.iInitDisplayStart===l&&(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 s=o.oLanguage;h.extend(!0,s,e.oLanguage);""!==s.sUrl&&(h.ajax({dataType:"json",url:s.sUrl,success:function(a){S(a);H(m.oLanguage,a);h.extend(true,s,a);ia(o)},error:function(){ia(o)}}),n=!0);null===e.asStripeClasses&&(o.asStripeClasses=[j.sStripeOdd,j.sStripeEven]); +var g=o.asStripeClasses,u=r.children("tbody").find("tr").eq(0);-1!==h.inArray(!0,h.map(g,function(a){return u.hasClass(a)}))&&(h("tbody tr",this).removeClass(g.join(" ")),o.asDestroyStripes=g.slice());q=[];g=this.getElementsByTagName("thead");0!==g.length&&(fa(o.aoHeader,g[0]),q=qa(o));if(null===e.aoColumns){p=[];g=0;for(i=q.length;g").appendTo(this));o.nTHead=i[0];i=r.children("tbody");0===i.length&&(i=h("").appendTo(this));o.nTBody=i[0];i=r.children("tfoot"); +if(0===i.length&&0").appendTo(this);0===i.length||0===i.children().length?r.addClass(j.sNoFooter):0a?new s(b[a],this[a]):null},filter:function(a){var b=[];if(x.filter)b= +x.filter.call(this,a,this);else for(var c=0,d=this.length;c").addClass(b),g("td",c).addClass(b).html(a)[0].colSpan=ca(d),e.push(c[0]))};f(a,b);c._details&&c._details.remove();c._details=g(e);c._detailsShow&&c._details.insertAfter(c.nTr)}return this});p(["row().child.show()","row().child().show()"],function(){Ub(this, -!0);return this});p(["row().child.hide()","row().child().hide()"],function(){Ub(this,!1);return this});p(["row().child.remove()","row().child().remove()"],function(){bb(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 cc=/^(.+):(name|visIdx|visible)$/,Vb=function(a,b,c,d,e){for(var c=[],d=0,f=e.length;d=0?b:h.length+b];if(typeof a==="function"){var e=Da(c,f);return g.map(h,function(b,f){return a(f,Vb(c,f,0,0,e),j[f])?f:null})}var l=typeof a==="string"?a.match(cc):"";if(l)switch(l[2]){case "visIdx":case "visible":b=parseInt(l[1],10);if(b<0){var k=g.map(h,function(a,b){return a.bVisible?b:null}); -return[k[k.length+b]]}return[$(c,b)];case "name":return g.map(i,function(a,b){return a===l[1]?b:null})}else return g(j).filter(a).map(function(){return g.inArray(this,j)}).toArray()},c,f)},1);c.selector.cols=a;c.selector.opts=b;return c});u("columns().header()","column().header()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].nTh},1)});u("columns().footer()","column().footer()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].nTf},1)});u("columns().data()", +function(a,b){return b},1)});u("rows().ids()","row().id()",function(a){for(var b=[],c=this.context,d=0,e=c.length;d").addClass(b),h("td",c).addClass(b).html(a)[0].colSpan=ca(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(){Ub(this, +!0);return this});p(["row().child.hide()","row().child().hide()"],function(){Ub(this,!1);return this});p(["row().child.remove()","row().child().remove()"],function(){bb(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 cc=/^(.+):(name|visIdx|visible)$/,Vb=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,Vb(c,f,0,0,e),j[f])?f:null})}var l=typeof a==="string"?a.match(cc):"";if(l)switch(l[2]){case "visIdx":case "visible":b=parseInt(l[1],10);if(b<0){var k=h.map(g,function(a,b){return a.bVisible?b:null}); +return[k[k.length+b]]}return[$(c,b)];case "name":return h.map(i,function(a,b){return a===l[1]?b:null})}else return h(j).filter(a).map(function(){return h.inArray(this,j)}).toArray()},c,f)},1);c.selector.cols=a;c.selector.opts=b;return c});u("columns().header()","column().header()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].nTh},1)});u("columns().footer()","column().footer()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].nTf},1)});u("columns().data()", "column().data()",function(){return this.iterator("column-rows",Vb,1)});u("columns().dataSrc()","column().dataSrc()",function(){return this.iterator("column",function(a,b){return a.aoColumns[b].mData},1)});u("columns().cache()","column().cache()",function(a){return this.iterator("column-rows",function(b,c,d,e,f){return ja(b.aoData,f,"search"===a?"_aFilterData":"_aSortData",c)},1)});u("columns().nodes()","column().nodes()",function(){return this.iterator("column-rows",function(a,b,c,d,e){return ja(a.aoData, -e,"anCells",b)},1)});u("columns().visible()","column().visible()",function(a,b){return this.iterator("column",function(c,d){if(a===l)return c.aoColumns[d].bVisible;var e=c.aoColumns,f=e[d],h=c.aoData,i,j,k;if(a!==l&&f.bVisible!==a){if(a){var m=g.inArray(!0,D(e,"bVisible"),d+1);i=0;for(j=h.length;id;return!0};k.isDataTable=k.fnIsDataTable=function(a){var b=g(a).get(0),c=!1;g.each(k.settings, -function(a,e){var f=e.nScrollHead?g("table",e.nScrollHead)[0]:null,h=e.nScrollFoot?g("table",e.nScrollFoot)[0]:null;if(e.nTable===b||f===b||h===b)c=!0});return c};k.tables=k.fnTables=function(a){var b=!1;g.isPlainObject(a)&&(b=a.api,a=a.visible);var c=g.map(k.settings,function(b){if(!a||a&&g(b.nTable).is(":visible"))return b.nTable});return b?new s(c):c};k.util={throttle:ua,escapeRegex:va};k.camelToHungarian=H;p("$()",function(a,b){var c=this.rows(b).nodes(),c=g(c);return g([].concat(c.filter(a).toArray(), -c.find(a).toArray()))});g.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=g(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 s(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,h=b.nTHead,i=b.nTFoot,j=g(e),f=g(f),l=g(b.nTableWrapper),m=g.map(b.aoData,function(a){return a.nTr}),p;b.bDestroying=!0;w(b,"aoDestroyCallback","destroy",[b]);a||(new s(b)).columns().visible(!0);l.unbind(".DT").find(":not(tbody *)").unbind(".DT");g(Fa).unbind(".DT-"+b.sInstance);e!=h.parentNode&&(j.children("thead").detach(),j.append(h)); -i&&e!=i.parentNode&&(j.children("tfoot").detach(),j.append(i));b.aaSorting=[];b.aaSortingFixed=[];xa(b);g(m).removeClass(b.asStripeClasses.join(" "));g("th, td",h).removeClass(d.sSortable+" "+d.sSortableAsc+" "+d.sSortableDesc+" "+d.sSortableNone);b.bJUI&&(g("th span."+d.sSortIcon+", td span."+d.sSortIcon,h).detach(),g("th, td",h).each(function(){var a=g("div."+d.sSortJUIWrapper,this);g(this).append(a.contents());a.detach()}));f.children().detach();f.append(m);h=a?"remove":"detach";j[h]();l[h](); -!a&&c&&(c.insertBefore(e,b.nTableReinsertBefore),j.css("width",b.sDestroyWidth).removeClass(d.sTable),(p=b.asDestroyStripes.length)&&f.children().each(function(a){g(this).addClass(b.asDestroyStripes[a%p])}));c=g.inArray(b,k.settings);-1!==c&&k.settings.splice(c,1)})});g.each(["column","row","cell"],function(a,b){p(b+"s().every()",function(a){var d=this.selector.opts;return this.iterator(b,function(e,f,h,g,j){a.call((new s(e))[b](f,"cell"===b?h:d,"cell"===b?d:l),f,h,g,j)})})});p("i18n()",function(a, -b,c){var d=this.context[0],a=P(a)(d.oLanguage);a===l&&(a=b);c!==l&&g.isPlainObject(a)&&(a=a[c]!==l?a[c]:a._);return a.replace("%d",c)});k.version="1.10.10-dev";k.settings=[];k.models={};k.models.oSearch={bCaseInsensitive:!0,sSearch:"",bRegex:!1,bSmart:!0};k.models.oRow={nTr:null,anCells:null,_aData:[],_aSortData:null,_aFilterData:null,_sFilterRow:null,_sRowStripe:"",src:null,idx:-1};k.models.oColumn={idx:null,aDataSort:null,asSorting:null,bSearchable:null,bSortable:null,bVisible:null,_sManualType:null, +c[0].column,a);ea(b[0],c[0].row,"data",c[0].column);return this});p("order()",function(a,b){var c=this.context;if(a===l)return 0!==c.length?c[0].aaSorting:l;"number"===typeof a?a=[[a,b]]:h.isArray(a[0])||(a=Array.prototype.slice.call(arguments));return this.iterator("table",function(b){b.aaSorting=a.slice()})});p("order.listener()",function(a,b,c){return this.iterator("table",function(d){Oa(d,a,b,c)})});p("order.fixed()",function(a){if(!a){var b=this.context,b=b.length?b[0].aaSortingFixed:l;return h.isArray(b)? +{pre:b}:b}return this.iterator("table",function(b){b.aaSortingFixed=h.extend(!0,{},a)})});p(["columns().order()","column().order()"],function(a){var b=this;return this.iterator("table",function(c,d){var e=[];h.each(b[d],function(b,c){e.push([c,a])});c.aaSorting=e})});p("search()",function(a,b,c,d){var e=this.context;return a===l?0!==e.length?e[0].oPreviousSearch.sSearch:l:this.iterator("table",function(e){e.oFeatures.bFilter&&ha(e,h.extend({},e.oPreviousSearch,{sSearch:a+"",bRegex:null===b?!1:b,bSmart:null=== +c?!0:c,bCaseInsensitive:null===d?!0:d}),1)})});u("columns().search()","column().search()",function(a,b,c,d){return this.iterator("column",function(e,f){var g=e.aoPreSearchCols;if(a===l)return g[f].sSearch;e.oFeatures.bFilter&&(h.extend(g[f],{sSearch:a+"",bRegex:null===b?!1:b,bSmart:null===c?!0:c,bCaseInsensitive:null===d?!0:d}),ha(e,e.oPreviousSearch,1))})});p("state()",function(){return this.context.length?this.context[0].oSavedState:null});p("state.clear()",function(){return this.iterator("table", +function(a){a.fnStateSaveCallback.call(a.oInstance,a,{})})});p("state.loaded()",function(){return this.context.length?this.context[0].oLoadedState:null});p("state.save()",function(){return this.iterator("table",function(a){ya(a)})});k.versionCheck=k.fnVersionCheck=function(a){for(var b=k.version.split("."),a=a.split("."),c,d,e=0,f=a.length;ed;return!0};k.isDataTable=k.fnIsDataTable=function(a){var b=h(a).get(0),c=!1;h.each(k.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};k.tables=k.fnTables=function(a){var b=!1;h.isPlainObject(a)&&(b=a.api,a=a.visible);var c=h.map(k.settings,function(b){if(!a||a&&h(b.nTable).is(":visible"))return b.nTable});return b?new s(c):c};k.util={throttle:ua,escapeRegex:va};k.camelToHungarian=H;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 s(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,i=b.nTFoot,j=h(e),f=h(f),l=h(b.nTableWrapper),m=h.map(b.aoData,function(a){return a.nTr}),p;b.bDestroying=!0;w(b,"aoDestroyCallback","destroy",[b]);a||(new s(b)).columns().visible(!0);l.unbind(".DT").find(":not(tbody *)").unbind(".DT");h(Fa).unbind(".DT-"+b.sInstance);e!=g.parentNode&&(j.children("thead").detach(),j.append(g)); +i&&e!=i.parentNode&&(j.children("tfoot").detach(),j.append(i));b.aaSorting=[];b.aaSortingFixed=[];xa(b);h(m).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(m);g=a?"remove":"detach";j[g]();l[g](); +!a&&c&&(c.insertBefore(e,b.nTableReinsertBefore),j.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,k.settings);-1!==c&&k.settings.splice(c,1)})});h.each(["column","row","cell"],function(a,b){p(b+"s().every()",function(a){var d=this.selector.opts;return this.iterator(b,function(e,f,g,h,j){a.call((new s(e))[b](f,"cell"===b?g:d,"cell"===b?d:l),f,g,h,j)})})});p("i18n()",function(a, +b,c){var d=this.context[0],a=P(a)(d.oLanguage);a===l&&(a=b);c!==l&&h.isPlainObject(a)&&(a=a[c]!==l?a[c]:a._);return a.replace("%d",c)});k.version="1.10.10-dev";k.settings=[];k.models={};k.models.oSearch={bCaseInsensitive:!0,sSearch:"",bRegex:!1,bSmart:!0};k.models.oRow={nTr:null,anCells:null,_aData:[],_aSortData:null,_aFilterData:null,_sFilterRow:null,_sRowStripe:"",src:null,idx:-1};k.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};k.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:g.extend({},k.models.oSearch),sAjaxDataProp:"data",sAjaxSource:null,sDom:"lfrtip",searchDelay:null,sPaginationType:"simple_numbers",sScrollX:"",sScrollXInner:"",sScrollY:"",sServerMethod:"GET",renderer:null,rowId:"DT_RowId"};X(k.defaults);k.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, +oSearch:h.extend({},k.models.oSearch),sAjaxDataProp:"data",sAjaxSource:null,sDom:"lfrtip",searchDelay:null,sPaginationType:"simple_numbers",sScrollX:"",sScrollXInner:"",sScrollY:"",sServerMethod:"GET",renderer:null,rowId:"DT_RowId"};X(k.defaults);k.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};X(k.defaults.column);k.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:l,oAjaxData:l,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};k.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:k.fnVersionCheck,iApiIndex:0,oJUIClasses:{},sVersion:k.version};g.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});g.extend(k.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", +aLastSort:[],oPlugins:{},rowIdFn:null,rowId:null};k.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:k.fnVersionCheck,iApiIndex:0,oJUIClasses:{},sVersion:k.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(k.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="",F=Ea+"ui-state-default",ka=Ea+"css_right ui-icon ui-icon-",Wb=Ea+"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix";g.extend(k.ext.oJUIClasses,k.ext.classes,{sPageButton:"fg-button ui-button "+F,sPageButtonActive:"ui-state-disabled",sPageButtonDisabled:"ui-state-disabled",sPaging:"dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_",sSortAsc:F+" sorting_asc", +sSortJUIDescAllowed:"",sSortJUIWrapper:"",sSortIcon:"",sJUIHeader:"",sJUIFooter:""});var Ea="",Ea="",F=Ea+"ui-state-default",ka=Ea+"css_right ui-icon ui-icon-",Wb=Ea+"fg-toolbar ui-toolbar ui-widget-header ui-helper-clearfix";h.extend(k.ext.oJUIClasses,k.ext.classes,{sPageButton:"fg-button ui-button "+F,sPageButtonActive:"ui-state-disabled",sPageButtonDisabled:"ui-state-disabled",sPaging:"dataTables_paginate fg-buttonset ui-buttonset fg-buttonset-multi ui-buttonset-multi paging_",sSortAsc:F+" sorting_asc", sSortDesc:F+" sorting_desc",sSortable:F+" sorting",sSortableAsc:F+" sorting_asc_disabled",sSortableDesc:F+" sorting_desc_disabled",sSortableNone:F+" sorting_disabled",sSortJUIAsc:ka+"triangle-1-n",sSortJUIDesc:ka+"triangle-1-s",sSortJUI:ka+"carat-2-n-s",sSortJUIAscAllowed:ka+"carat-1-n",sSortJUIDescAllowed:ka+"carat-1-s",sSortJUIWrapper:"DataTables_sort_wrapper",sSortIcon:"DataTables_sort_icon",sScrollHead:"dataTables_scrollHead "+F,sScrollFoot:"dataTables_scrollFoot "+F,sHeaderTH:F,sFooterTH:F,sJUIHeader:Wb+ -" ui-corner-tl ui-corner-tr",sJUIFooter:Wb+" ui-corner-bl ui-corner-br"});var Lb=k.ext.pager;g.extend(Lb,{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});g.extend(!0,k.ext.renderer,{pageButton:{_:function(a,b,c,d,e,f){var h=a.oClasses, -i=a.oLanguage.oPaginate,j,k,l=0,p=function(b,d){var q,s,u,t,v=function(b){Ta(a,b.data.action,true)};q=0;for(s=d.length;q").appendTo(b);p(u,t)}else{j=null;k="";switch(t){case "ellipsis":b.append('…');break;case "first":j=i.sFirst;k=t+(e>0?"":" "+h.sPageButtonDisabled);break;case "previous":j=i.sPrevious;k=t+(e>0?"":" "+h.sPageButtonDisabled);break;case "next":j=i.sNext;k=t+(e",{"class":h.sPageButton+" "+k,"aria-controls":a.sTableId,"data-dt-idx":l,tabindex:a.iTabIndex,id:c===0&&typeof t==="string"?a.sTableId+"_"+t:null}).html(j).appendTo(b);Va(u,{action:t},v);l++}}}},q;try{q=g(b).find(T.activeElement).data("dt-idx")}catch(s){}p(g(b).empty(),d);q&&g(b).find("[data-dt-idx="+q+"]").focus()}}});g.extend(k.ext.type.detect,[function(a, +" ui-corner-tl ui-corner-tr",sJUIFooter:Wb+" ui-corner-bl ui-corner-br"});var Lb=k.ext.pager;h.extend(Lb,{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,k.ext.renderer,{pageButton:{_:function(a,b,c,d,e,f){var g=a.oClasses, +i=a.oLanguage.oPaginate,j,k,l=0,p=function(b,d){var q,s,u,t,v=function(b){Ta(a,b.data.action,true)};q=0;for(s=d.length;q").appendTo(b);p(u,t)}else{j=null;k="";switch(t){case "ellipsis":b.append('…');break;case "first":j=i.sFirst;k=t+(e>0?"":" "+g.sPageButtonDisabled);break;case "previous":j=i.sPrevious;k=t+(e>0?"":" "+g.sPageButtonDisabled);break;case "next":j=i.sNext;k=t+(e",{"class":g.sPageButton+" "+k,"aria-controls":a.sTableId,"data-dt-idx":l,tabindex:a.iTabIndex,id:c===0&&typeof t==="string"?a.sTableId+"_"+t:null}).html(j).appendTo(b);Va(u,{action:t},v);l++}}}},q;try{q=h(b).find(T.activeElement).data("dt-idx")}catch(s){}p(h(b).empty(),d);q&&h(b).find("[data-dt-idx="+q+"]").focus()}}});h.extend(k.ext.type.detect,[function(a, b){var c=b.oLanguage.sDecimal;return Ya(a,c)?"num"+c:null},function(a){if(a&&!(a instanceof Date)&&(!$b.test(a)||!ac.test(a)))return null;var b=Date.parse(a);return null!==b&&!isNaN(b)||K(a)?"date":null},function(a,b){var c=b.oLanguage.sDecimal;return Ya(a,c,!0)?"num-fmt"+c:null},function(a,b){var c=b.oLanguage.sDecimal;return Qb(a,c)?"html-num"+c:null},function(a,b){var c=b.oLanguage.sDecimal;return Qb(a,c,!0)?"html-num-fmt"+c:null},function(a){return K(a)||"string"===typeof a&&-1!==a.indexOf("<")? -"html":null}]);g.extend(k.ext.type.search,{html:function(a){return K(a)?a:"string"===typeof a?a.replace(Nb," ").replace(Ca,""):""},string:function(a){return K(a)?a:"string"===typeof a?a.replace(Nb," "):a}});var Ba=function(a,b,c,d){if(0!==a&&(!a||"-"===a))return-Infinity;b&&(a=Pb(a,b));a.replace&&(c&&(a=a.replace(c,"")),d&&(a=a.replace(d,"")));return 1*a};g.extend(v.type.order,{"date-pre":function(a){return Date.parse(a)||0},"html-pre":function(a){return K(a)?"":a.replace?a.replace(/<.*?>/g,"").toLowerCase(): -a+""},"string-pre":function(a){return K(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}});cb("");g.extend(!0,k.ext.renderer,{header:{_:function(a,b,c,d){g(a.nTable).on("order.dt.DT",function(e,f,h,g){if(a===f){e=c.idx;b.removeClass(c.sSortingClass+" "+d.sSortAsc+" "+d.sSortDesc).addClass(g[e]=="asc"?d.sSortAsc:g[e]=="desc"?d.sSortDesc:c.sSortingClass)}})},jqueryui:function(a, -b,c,d){g("
").addClass(d.sSortJUIWrapper).append(b.contents()).append(g("").addClass(d.sSortIcon+" "+c.sSortingClassJUI)).appendTo(b);g(a.nTable).on("order.dt.DT",function(e,f,h,g){if(a===f){e=c.idx;b.removeClass(d.sSortAsc+" "+d.sSortDesc).addClass(g[e]=="asc"?d.sSortAsc:g[e]=="desc"?d.sSortDesc:c.sSortingClass);b.find("span."+d.sSortIcon).removeClass(d.sSortJUIAsc+" "+d.sSortJUIDesc+" "+d.sSortJUI+" "+d.sSortJUIAscAllowed+" "+d.sSortJUIDescAllowed).addClass(g[e]=="asc"?d.sSortJUIAsc: -g[e]=="desc"?d.sSortJUIDesc:c.sSortingClassJUI)}})}}});k.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?"-":"",f=Math.abs(parseFloat(f)),i=parseInt(f,10),f=c?b+(f-i).toFixed(c).substring(2):"";return g+(d||"")+i.toString().replace(/\B(?=(\d{3})+(?!\d))/g,a)+f+(e||"")}}}};g.extend(k.ext.internal,{_fnExternApiFunc:Mb,_fnBuildAjax:ra,_fnAjaxUpdate:kb,_fnAjaxParameters:tb,_fnAjaxUpdateDraw:ub,_fnAjaxDataSrc:sa,_fnAddColumn:Ga, -_fnColumnOptions:la,_fnAdjustColumnSizing:Y,_fnVisibleToColumnIndex:$,_fnColumnIndexToVisible:ba,_fnVisbleColumns:ca,_fnGetColumns:aa,_fnColumnTypes:Ia,_fnApplyColumnDefs:hb,_fnHungarianMap:X,_fnCamelToHungarian:H,_fnLanguageCompat:S,_fnBrowserDetect:fb,_fnAddData:L,_fnAddTr:ma,_fnNodeToDataIndex:function(a,b){return b._DT_RowIndex!==l?b._DT_RowIndex:null},_fnNodeToColumnIndex:function(a,b,c){return g.inArray(c,a.aoData[b].anCells)},_fnGetCellData:B,_fnSetCellData:ib,_fnSplitObjNotation:La,_fnGetObjectDataFn:P, +"html":null}]);h.extend(k.ext.type.search,{html:function(a){return K(a)?a:"string"===typeof a?a.replace(Nb," ").replace(Ca,""):""},string:function(a){return K(a)?a:"string"===typeof a?a.replace(Nb," "):a}});var Ba=function(a,b,c,d){if(0!==a&&(!a||"-"===a))return-Infinity;b&&(a=Pb(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 K(a)?"":a.replace?a.replace(/<.*?>/g,"").toLowerCase(): +a+""},"string-pre":function(a){return K(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}});cb("");h.extend(!0,k.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)}})}}});k.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?"-":"",f=Math.abs(parseFloat(f)),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||"")}}}};h.extend(k.ext.internal,{_fnExternApiFunc:Mb,_fnBuildAjax:ra,_fnAjaxUpdate:kb,_fnAjaxParameters:tb,_fnAjaxUpdateDraw:ub,_fnAjaxDataSrc:sa,_fnAddColumn:Ga, +_fnColumnOptions:la,_fnAdjustColumnSizing:Y,_fnVisibleToColumnIndex:$,_fnColumnIndexToVisible:ba,_fnVisbleColumns:ca,_fnGetColumns:aa,_fnColumnTypes:Ia,_fnApplyColumnDefs:hb,_fnHungarianMap:X,_fnCamelToHungarian:H,_fnLanguageCompat:S,_fnBrowserDetect:fb,_fnAddData:L,_fnAddTr:ma,_fnNodeToDataIndex:function(a,b){return b._DT_RowIndex!==l?b._DT_RowIndex:null},_fnNodeToColumnIndex:function(a,b,c){return h.inArray(c,a.aoData[b].anCells)},_fnGetCellData:B,_fnSetCellData:ib,_fnSplitObjNotation:La,_fnGetObjectDataFn:P, _fnSetObjectDataFn:Q,_fnGetDataMaster:Ma,_fnClearTable:na,_fnDeleteIndex:oa,_fnInvalidate:ea,_fnGetRowElements:Ka,_fnCreateTr:Ja,_fnBuildHead:jb,_fnDrawHead:ga,_fnDraw:M,_fnReDraw:R,_fnAddOptionsHtml:mb,_fnDetectHeader:fa,_fnGetUniqueThs:qa,_fnFeatureHtmlFilter:ob,_fnFilterComplete:ha,_fnFilterCustom:xb,_fnFilterColumn:wb,_fnFilter:vb,_fnFilterCreateSearch:Qa,_fnEscapeRegex:va,_fnFilterData:yb,_fnFeatureHtmlInfo:rb,_fnUpdateInfo:Bb,_fnInfoMacros:Cb,_fnInitialise:ia,_fnInitComplete:ta,_fnLengthChange:Ra, _fnFeatureHtmlLength:nb,_fnFeatureHtmlPaginate:sb,_fnPageChange:Ta,_fnFeatureHtmlProcessing:pb,_fnProcessingDisplay:C,_fnFeatureHtmlTable:qb,_fnScrollDraw:Z,_fnApplyToChildren:G,_fnCalculateColumnWidths:Ha,_fnThrottle:ua,_fnConvertToWidth:Eb,_fnGetWidestNode:Fb,_fnGetMaxLenString:Gb,_fnStringToCss:t,_fnSortFlatten:V,_fnSort:lb,_fnSortAria:Ib,_fnSortListener:Ua,_fnSortAttachListener:Oa,_fnSortingClasses:xa,_fnSortData:Hb,_fnSaveState:ya,_fnLoadState:Jb,_fnSettingsFromNode:za,_fnLog:I,_fnMap:E,_fnBindAction:Va, -_fnCallbackReg:z,_fnCallbackFire:w,_fnLengthOverflow:Sa,_fnRenderer:Pa,_fnDataSource:y,_fnRowAttributes:Na,_fnCalculateEnd:function(){}});g.fn.dataTable=k;g.fn.dataTableSettings=k.settings;g.fn.dataTableExt=k.ext;g.fn.DataTable=function(a){return g(this).dataTable(a).api()};g.each(k,function(a,b){g.fn.DataTable[a]=b});return g.fn.dataTable};"function"===typeof define&&define.amd?define("datatables",["jquery"],S):"object"===typeof exports?module.exports=function(g){return S(g||require("jquery"))}: -jQuery&&!jQuery.fn.dataTable&&S(jQuery)})(window,document); +_fnCallbackReg:z,_fnCallbackFire:w,_fnLengthOverflow:Sa,_fnRenderer:Pa,_fnDataSource:y,_fnRowAttributes:Na,_fnCalculateEnd:function(){}});h.fn.dataTable=k;h.fn.dataTableSettings=k.settings;h.fn.dataTableExt=k.ext;h.fn.DataTable=function(a){return h(this).dataTable(a).api()};h.each(k,function(a,b){h.fn.DataTable[a]=b});return h.fn.dataTable};"function"===typeof define&&define.amd?define("datatables",["jquery"],S):"object"===typeof exports?module.exports=S(require("jquery")):jQuery&&!jQuery.fn.dataTable&& +S(jQuery)})(window,document);