From 177b25487940aa0d229a4524017e18f9858dc101 Mon Sep 17 00:00:00 2001 From: Allan Jardine Date: Wed, 11 Dec 2013 17:21:41 +0000 Subject: [PATCH] Examples: Add order column example --- examples/styling/order-column.html | 741 +++++++++++++++++++++++++++++ 1 file changed, 741 insertions(+) create mode 100644 examples/styling/order-column.html diff --git a/examples/styling/order-column.html b/examples/styling/order-column.html new file mode 100644 index 00000000..12b189c2 --- /dev/null +++ b/examples/styling/order-column.html @@ -0,0 +1,741 @@ + + + + + + + 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$3,120
Garrett WintersDirectorEdinburgh632011/07/25$5,300
Ashton CoxTechnical AuthorSan Francisco662009/01/12$4,800
Cedric KellyJavascript DeveloperEdinburgh222012/03/29$3,600
Jenna ElliottFinancial ControllerEdinburgh332008/11/28$5,300
Brielle WilliamsonIntegration SpecialistNew York612012/12/02$4,525
Herrod ChandlerSales AssistantSan Francisco592012/08/06$4,080
Rhona DavidsonIntegration SpecialistEdinburgh552010/10/14$6,730
Colleen HurstJavascript DeveloperSan Francisco392009/09/15$5,000
Sonya FrostSoftware EngineerEdinburgh232008/12/13$3,600
Jena GainesSystem ArchitectLondon302008/12/19$5,000
Quinn FlynnFinancial ControllerEdinburgh222013/03/03$4,200
Charde MarshallRegional DirectorSan Francisco362008/10/16$5,300
Haley KennedySenior Marketing DesignerLondon432012/12/18$4,800
Tatyana FitzpatrickRegional DirectorLondon192010/03/17$2,875
Michael SilvaSenior Marketing DesignerLondon662012/11/27$3,750
Paul ByrdJavascript DeveloperNew York642010/06/09$5,000
Gloria LittleSystems AdministratorNew York592009/04/10$3,120
Bradley GreerSoftware EngineerLondon412012/10/13$3,120
Dai RiosSystem ArchitectEdinburgh352012/09/26$4,200
Jenette CaldwellFinancial ControllerNew York302011/09/03$4,965
Yuri BerrySystem ArchitectNew York402009/06/25$3,600
Caesar VanceTechnical AuthorNew York212011/12/12$4,965
Doris WilderSales AssistantEdinburgh232010/09/20$4,965
Angelica RamosSystem ArchitectLondon362009/10/09$2,875
Gavin JoyceDeveloperEdinburgh422010/12/22$4,525
Jennifer ChangRegional DirectorLondon282010/11/14$4,080
Brenden WagnerSoftware EngineerSan Francisco182011/06/07$3,750
Ebony GrimesSoftware EngineerSan Francisco482010/03/11$2,875
Russell ChavezDirectorEdinburgh202011/08/14$3,600
Michelle HouseIntegration SpecialistEdinburgh372011/06/02$3,750
Suki BurksDeveloperLondon532009/10/22$2,875
Prescott BartlettTechnical AuthorLondon272011/05/07$6,730
Gavin CortezTechnical AuthorSan Francisco222008/10/26$6,730
Martena MccrayIntegration SpecialistEdinburgh462011/03/09$4,080
Unity ButlerSenior Marketing DesignerSan Francisco472009/12/09$3,750
Howard HatfieldFinancial ControllerSan Francisco512008/12/16$4,080
Hope FuentesFinancial ControllerSan Francisco412010/02/12$4,200
Vivian HarrellSystem ArchitectSan Francisco622009/02/14$4,965
Timothy MooneyFinancial ControllerLondon372008/12/11$4,200
Jackson BradshawDirectorNew York652008/09/26$5,000
Miriam WeissSupport EngineerEdinburgh642011/02/03$4,965
Bruno NashSoftware EngineerLondon382011/05/03$4,200
Odessa JacksonSupport EngineerEdinburgh372009/08/19$3,600
Thor WaltonDeveloperNew York612013/08/11$3,600
Finn CamachoSupport EngineerSan Francisco472009/07/07$4,800
Elton BaldwinData CoordinatorEdinburgh642012/04/09$6,730
Zenaida FrankSoftware EngineerNew York632010/01/04$4,800
Zorita SerranoSoftware EngineerSan Francisco562012/06/01$5,300
Jennifer AcostaJavascript DeveloperEdinburgh432013/02/01$2,875
Cara StevensSales AssistantNew York462011/12/06$4,800
Hermione ButlerDirectorLondon472011/03/21$4,080
Lael GreerSystems AdministratorLondon212009/02/27$3,120
Jonas AlexanderDeveloperSan Francisco302010/07/14$5,300
Shad DeckerRegional DirectorEdinburgh512008/11/13$5,300
Michael BruceJavascript DeveloperEdinburgh292011/06/27$4,080
Donna SniderSystem ArchitectNew York272011/01/25$3,120
+ +
    +
  • Javascript
    • +
  • HTML
    • +
  • CSS
    • +
  • Ajax
    • +
+ +
+
+

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

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

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

+ + +
+ +
+

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

+
+ +
+
+

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

+ 
+
+
+
+ +

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

+ + +
+ +
+

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

+
+
+
+
+ +
+
+
+ +
+

Other examples

+ +
+
+

Basic Init

+ +
+ +
+

Advanced Init

+ +
+ +
+

Styling

+ +
+ +
+

Data Sources

+ +
+ +
+

Ajax

+ +
+ +
+

Server Side

+ +
+ +
+

Api

+ +
+ +
+

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

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