From a5d77d99bcda1dd072f4f3d0717e69893d7425d1 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Tue, 10 Feb 2015 14:27:53 +0000 Subject: [PATCH] Sync repos: Add html data options example --- .../advanced_init/html5-data-options.html | 745 ++++++++++++++++++ 1 file changed, 745 insertions(+) create mode 100644 examples/advanced_init/html5-data-options.html diff --git a/examples/advanced_init/html5-data-options.html b/examples/advanced_init/html5-data-options.html new file mode 100644 index 00000000..86947f47 --- /dev/null +++ b/examples/advanced_init/html5-data-options.html @@ -0,0 +1,745 @@ + + + + + + + + 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 pageLengthDT.

+ +

The table below shows the use of pageLengthDT and orderDT on the main table. Column options can also be defined on the table column cells, as shown by the + use of the columns.orderableDT 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.

+
+
+
+
+ +
+
+
+ +
+

Other examples

+ +
+
+

Basic initialisation

+ +
+ +
+

Advanced initialisation

+ +
+ +
+

Styling

+ +
+ +
+

Data sources

+ +
+ +
+

API

+ +
+ +
+

Ajax

+ +
+ +
+

Server-side

+ +
+ +
+

Plug-ins

+ +
+
+ +
+

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

+ +

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

+
+
+
+
+ + \ No newline at end of file