Latest integraiton file for consistency

- Search would insert them into the document

.datatables-commit-sync

@@ -0,0 +1 @@
+c7bd54a8ab7c021b10d16ac228a2120ba7d5277e

.gitignore

@@ -1,5 +1,7 @@
 extras
+extensions
 docs
 cdn
-media/js/jquery.dataTables.min.js
+media/css/jquery.dataTables_themeroller.min.css
 .DS_Store
+Plugins

Contributing.md

@@ -0,0 +1,18 @@
+# Support requests
+
+Please direct support requests to the [DataTables forums](https://datatables.net/forums), ensuring that you provide a link to a test page that shows the problem and a full description of the issue. If you require urgent help, [priority support](https://datatables.net/support) is available.
+
+
+# Contributing code
+
+If you are thinking of contributing code to DataTables, first of all, thank you! All fixes, patches and enhancements to DataTables are very warmly welcomed. In order to keep thing manageable, there are a number of guidelines that should be followed in order to ensure that your modification is included in DataTables as quickly as possible:
+
+1. Make contributions in the DataTables/DataTablesSrc repo. Changes to the built files in the built repo (DataTables/DataTables) will not be accepted since they would be overwritten by the next build!
+
+2. Follow the style of the code in the existing files. They might not be to everyone's tastes, but consistency is key for a mature project like DataTables. DataTables doesn't have a coding standards document, but simple common sense of following the same style as in the existing files is ideal. For example use tabs not spaces (as you will see all source files use tabs).
+
+3. Link to a test page showing the bug you are fixing or the feature you are adding. This allows to me to quickly identify what is being changed and why. Don't worry about being verbose in pull requests - its much better to know exactly what is changing and why!
+
+4. DataTables is a large and complex project and it isn't always possible or suitable to pull in every suggested change. Please don't be offended if a pull request is not merged in, it will explained why not if this is the case. Also it isn't always possible to fully check and test pull requests as quickly as I would like due to other commitments. Again this is no reflection on your pull request, just the busy life that we all lead! If you have any questions about your potential contribution and its place in the DataTables project structure, please ask ahead of time in the [DataTables forums](//datatables.net/forums).
+
+5. Pull requests will only be accepted if you acknowledge that your contribution is offered under and will be made available under the project's existing license (MIT). If your initial pull request doesn't explicitly acknowledge this I'll ask before it is pulled in.

ISSUE_TEMPLATE.md

@@ -0,0 +1,3 @@
+Please post support requests and questions in the DataTables forums at https://datatables.net/forums. Support requests posted here will be closed. This allows all questions to be located in a single, searchable, location.
+
+When you post your question in the DataTables forums, please ensure that you include a link to the page showing the issue so it can be debugged.

Readme.md

@@ -0,0 +1,59 @@
+# DataTables plug-in for jQuery
+
+DataTables is a table enhancing plug-in for the [jQuery](//jquery.com) Javascript library, adding sorting, paging and filtering abilities to plain HTML tables with minimal effort. The stated goal of DataTables is:
+
+> To enhance the accessibility of data in HTML tables.
+
+To meet this goal, DataTables is developed with two distinct groups of users in mind:
+
+* You the developers using DataTables. For developers DataTables provides a wide array of options for how data should be obtained, displayed and acted upon, along with an extensive API for accessing and manipulating the table.
+
+* End users. For those using the interface DataTables presents, actions to get the most from the information contained in tables, such as sorting and filtering, along with paging and scrolling of the data in table, are easy to use, intuitive and fast.
+
+
+## Installing DataTables
+
+To use DataTables, the primary way to obtain the software is to use the [DataTables downloader](//datatables.net/download). You can also include the individual files from the [DataTables CDN](//cdn.datatables.net). See the [documentation](//datatables.net/manual/installation) for full details.
+
+### NPM and Bower
+
+If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name `datatables.net`. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name.
+
+Please see the DataTables [NPM](//datatables.net/download/npm) and [Bower](//datatables.net/download/bower) installation pages for further information. The [DataTables installation manual](//datatables.net/manual/installation) also has details on how to use package managers with DataTables.
+
+
+## Usage
+
+In its simplest case, DataTables can be initialised with a single line of Javascript:
+
+```js
+$('table').dataTable();
+```
+
+where the jQuery selector is used to obtain a reference to the table you want to enhance with DataTables. Optional configuration parameters can be passed in to DataTables to have it perform certain actions by using a configuration object as the parameter passed in to the DataTables constructor. For example:
+
+```js
+$('table').dataTable( {
+  paginate: false,
+  scrollY: 300
+} );
+```
+
+will disable paging and enable scrolling.
+
+A full list of the options available for DataTables are available in the [documentation](//datatables.net).
+
+
+## Documentation
+
+Full documentation of the DataTables options, API and plug-in interface are available on the [DataTables web-site](//datatables.net). The site also contains information on the wide variety of plug-ins that are available for DataTables, which can be used to enhance and customise your table even further.
+
+
+## Support
+
+Support for DataTables is available through the [DataTables forums](//datatables.net/forums) and [commercial support options](//datatables.net/support) are available.
+
+
+## License
+
+DataTables is release under the [MIT license](//datatables.net/license). You are free to use, modify and distribute this software, as long as the copyright header is left intact (specifically the comment block which starts with `/*!`.

Readme.txt

@@ -1,11 +0,0 @@
-This DataTables plugin (v1.9.x) for jQuery was developed out of the desire to allow highly configurable access to HTML tables with advanced access features.
-
-For detailed installation, usage and API instructions, please refer to the DataTables web-pages: http://www.datatables.net
-
-Questions, feature requests and bug reports (etc) can all be asked on the DataTables forums: http://www.datatables.net/forums/
-
-The DataTables source can be found in the media/js/ directory of this archive.
-
-DataTables is released with dual licensing, using the GPL v2 (license-gpl2.txt) and an BSD style license (license-bsd.txt). You may select which of the two licenses you wish to use DataTables under. Please see the corresponding license file for details of these licenses. You are free to use, modify and distribute this software, but all copyright information must remain.
-
-If you discover any bugs in DataTables, have any suggestions for improvements or even if you just like using it, please free to get in touch with me: www.datatables.net/contact

bower.json

@@ -0,0 +1,31 @@
+{
+	"name": "datatables",
+	"main": [
+		"media/js/jquery.dataTables.js",
+		"media/css/jquery.dataTables.css",
+		"media/images/sort_asc.png",
+		"media/images/sort_asc_disabled.png",
+		"media/images/sort_both.png",
+		"media/images/sort_desc.png",
+		"media/images/sort_desc_disabled.png"
+	],
+	"dependencies": {
+		"jquery": ">=1.7.0"
+	},
+	"license": "MIT",
+	"keywords": [
+		"jquery",
+		"datatables",
+		"table",
+		"javascript",
+		"library"
+	],
+	"ignore": [
+		"/.*",
+		"examples",
+		"media/unit_testing",
+		"composer.json",
+		"dataTables.jquery.json",
+		"package.json"
+	]
+}

composer.json

@@ -0,0 +1,15 @@
+{
+	"name": "datatables/datatables",
+	"version": "1.10.19",
+	"description": "DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.", 
+	"homepage": "http://www.datatables.net/",
+	"author": "SpryMedia", 
+	"license": [
+		"MIT"
+	],
+	"prefer-stable": true,
+	"support": {
+		"forum": "https://datatables.net/forums",
+		"source": "https://github.com/DataTables/DataTablesSrc/"
+	}
+}

dataTables.jquery.json

@@ -0,0 +1,32 @@
+{
+	"name": "DataTables",
+	"version": "1.10.19",
+	"description": "DataTables enhances HTML tables with the ability to sort, filter and page the data in the table very easily. It provides a comprehensive API and set of configuration options, allowing you to consume data from virtually any data source.",
+	"homepage": "http://datatables.net/",
+	"docs": "http://datatables.net/",
+	"demo": "http://datatables.net/examples",
+	"download": "http://datatables.net/download",
+	"author": {
+		"name": "Allan Jardine",
+		"url": "http://sprymedia.co.uk"
+	},
+	"licenses": [
+		{
+			"type": "MIT",
+			"url": "http://datatables.net/license_bsd"
+		}
+	],
+	"dependencies": {
+		"jquery": ">=1.7"
+	},
+	"keywords": [
+		"DataTables",
+		"DataTable",
+		"table",
+		"grid",
+		"filter",
+		"sort",
+		"page",
+		"internationalisable"
+	]
+}

examples/advanced_init/events_post_init.html

@@ -1,667 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-			@import "../examples_support/jquery.tooltip.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" language="javascript" src="../examples_support/jquery.tooltip.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				/*
-				 * First step is to create title attributes for the rows in the table
-				 * This isn't needed if the required 'title' attribute is already set in the HTML in the
-				 * DOM 
-				 */
-				$('#example tbody tr').each( function() {
-					var sTitle;
-					var nTds = $('td', this);
-					var sBrowser = $(nTds[1]).text();
-					var sGrade = $(nTds[4]).text();
-					
-					if ( sGrade == "A" )
-						sTitle =  sBrowser+' will provide a first class (A) level of CSS support.';
-					else if ( sGrade == "C" )
-						sTitle = sBrowser+' will provide a core (C) level of CSS support.';
-					else if ( sGrade == "X" )
-						sTitle = sBrowser+' does not provide CSS support or has a broken implementation. Block CSS.';
-					else
-						sTitle = sBrowser+' will provide an undefined level of CSS support.';
-					
-					this.setAttribute( 'title', sTitle );
-				} );
-				
-				/* Init DataTables */
-				var oTable = $('#example').dataTable();
-				
-				/* Apply the tooltips */
-				oTable.$('tr').tooltip( {
-					"delay": 0,
-					"track": true,
-					"fade": 250
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables events (post-initialisation) example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>Events which are assigned to the table elements are retained by DataTables such that they will still work as you would expect, even after changing the sort order etc. (no need to reapply the event handlers). You can do this at any time, although if you apply the handlers after the table has been initialised there is an extra set. Rather then querying the DOM to get all rows (since they aren't there) you can use the '$' API method that DataTables provides which does a jQuery selector on the whole table and returns a jQuery object.</p>
-			<p>This example shows the tooltip plug-in being applied to the table after initialisation.</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr class="gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 
-				4.0
-				</td>
-			<td>Win 95+</td>
-			<td class="center">4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr class="gradeC">
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeU">
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	/*
-	 * First step is to create title attributes for the rows in the table
-	 * This isn't needed if the required 'title' attribute is already set in the HTML in the
-	 * DOM 
-	 */
-	$('#example tbody tr').each( function() {
-		var sTitle;
-		var nTds = $('td', this);
-		var sBrowser = $(nTds[1]).text();
-		var sGrade = $(nTds[4]).text();
-		
-		if ( sGrade == "A" )
-			sTitle =  sBrowser+' will provide a first class (A) level of CSS support.';
-		else if ( sGrade == "C" )
-			sTitle = sBrowser+' will provide a core (C) level of CSS support.';
-		else if ( sGrade == "X" )
-			sTitle = sBrowser+' does not provide CSS support or has a broken implementation. Block CSS.';
-		else
-			sTitle = sBrowser+' will provide an undefined level of CSS support.';
-		
-		this.setAttribute( 'title', sTitle );
-	} );
-	
-	/* Init DataTables */
-	var oTable = $('#example').dataTable();
-	
-	/* Apply the tooltips */
-	oTable.$('tr').tooltip( {
-		"delay": 0,
-		"track": true,
-		"fade": 250
-	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/advanced_init/events_pre_init.html

@@ -1,666 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-			@import "../examples_support/jquery.tooltip.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" language="javascript" src="../examples_support/jquery.tooltip.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				/*
-				 * First step is to create title attributes for the rows in the table
-				 * This isn't needed if the required 'title' attribute is already set in the HTML in the
-				 * DOM 
-				 */
-				$('#example tbody tr').each( function() {
-					var sTitle;
-					var nTds = $('td', this);
-					var sBrowser = $(nTds[1]).text();
-					var sGrade = $(nTds[4]).text();
-					
-					if ( sGrade == "A" )
-						sTitle =  sBrowser+' will provide a first class (A) level of CSS support.';
-					else if ( sGrade == "C" )
-						sTitle = sBrowser+' will provide a core (C) level of CSS support.';
-					else if ( sGrade == "X" )
-						sTitle = sBrowser+' does not provide CSS support or has a broken implementation. Block CSS.';
-					else
-						sTitle = sBrowser+' will provide an undefined level of CSS support.';
-					
-					this.setAttribute( 'title', sTitle );
-				} );
-				
-				/* Apply the tooltips */
-				$('#example tbody tr[title]').tooltip( {
-					"delay": 0,
-					"track": true,
-					"fade": 250
-				} );
-				
-				/* Init DataTables */
-				$('#example').dataTable();
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables events (pre-initialisation) example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>Events which are assigned to the table elements are retained by DataTables such that they will still work as you would expect, even after changing the sort order etc. (no need to reapply the event handlers). If you apply the event handlers before you initialise DataTables, you just do this in the normal way. This is shown in this example where the call <b>$('#example tbody tr[title]').tooltip();</b> is made before the table is initialised.</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr class="gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 
-				4.0
-				</td>
-			<td>Win 95+</td>
-			<td class="center">4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr class="gradeC">
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeU">
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	/*
-	 * First step is to create title attributes for the rows in the table
-	 * This isn't needed if the required 'title' attribute is already set in the HTML in the
-	 * DOM 
-	 */
-	$('#example tbody tr').each( function() {
-		var sTitle;
-		var nTds = $('td', this);
-		var sBrowser = $(nTds[1]).text();
-		var sGrade = $(nTds[4]).text();
-		
-		if ( sGrade == "A" )
-			sTitle =  sBrowser+' will provide a first class (A) level of CSS support.';
-		else if ( sGrade == "C" )
-			sTitle = sBrowser+' will provide a core (C) level of CSS support.';
-		else if ( sGrade == "X" )
-			sTitle = sBrowser+' does not provide CSS support or has a broken implementation. Block CSS.';
-		else
-			sTitle = sBrowser+' will provide an undefined level of CSS support.';
-		
-		this.setAttribute( 'title', sTitle );
-	} );
-	
-	/* Apply the tooltips */
-	$('#example tbody tr[title]').tooltip( {
-		"delay": 0,
-		"track": true,
-		"fade": 250
-	} );
-	
-	/* Init DataTables */
-	$('#example').dataTable();
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/advanced_init/highlight.html

@@ -1,643 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$('#example').dataTable();
-			} );
-		</script>
-	</head>
-	<body id="dt_example" class="ex_highlight_row">
-		<div id="container">
-			<div class="full_width big">
-				DataTables highlighting via CSS example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>When highlighting rows using CSS :hover, you need to be aware of the sorting class which is applied to elements in the column currently being sorted (assuming it is enabled - it is by default). This example shows how to consider this in CSS, with highlighting for each row, and a little tint for the sorting column to maintain it's visibility as the column currently being sorted upon.</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr class="gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 4.0</td>
-			<td>Win 95+</td>
-			<td class="center">4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr class="gradeC">
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeU">
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<p>Javascript:</p>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable();
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-
-			<p>CSS (note that for this example the selector ".ex_highlight" is used to limit the CSS here to just this example.</p>
-			<pre>.ex_highlight #example tbody tr.even:hover, #example tbody tr.even td.highlighted {
-	background-color: #ECFFB3;
-}
-
-.ex_highlight #example tbody tr.odd:hover, #example tbody tr.odd td.highlighted {
-	background-color: #E6FF99;
-}
-
-.ex_highlight_row #example tr.even:hover {
-	background-color: #ECFFB3;
-}
-
-.ex_highlight_row #example tr.even:hover td.sorting_1 {
-	background-color: #DDFF75;
-}
-
-.ex_highlight_row #example tr.even:hover td.sorting_2 {
-	background-color: #E7FF9E;
-}
-
-.ex_highlight_row #example tr.even:hover td.sorting_3 {
-	background-color: #E2FF89;
-}
-
-.ex_highlight_row #example tr.odd:hover {
-	background-color: #E6FF99;
-}
-
-.ex_highlight_row #example tr.odd:hover td.sorting_1 {
-	background-color: #D6FF5C;
-}
-
-.ex_highlight_row #example tr.odd:hover td.sorting_2 {
-	background-color: #E0FF84;
-}
-
-.ex_highlight_row #example tr.odd:hover td.sorting_3 {
-	background-color: #DBFF70;
-}
-</pre>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/advanced_init/html5-data-attributes.html

@@ -0,0 +1,903 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - HTML5 data-* attributes - cell data</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+$(document).ready(function() {
+	$('#example').DataTable();
+} );
+
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>HTML5 data-* attributes - cell data</span></h1>
+			<div class="info">
+				<p>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 <code>xxx-xxxx</code>, 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.</p>
+				<p>One method in which DataTables can obtain this orthogonal data for its different actions is through <a href=
+				"http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">custom HTML5 data attributes</a>. DataTables
+				will automatically detect four different attributes on the HTML elements:</p>
+				<ul class="markdown">
+					<li><code>data-sort</code> or <code>data-order</code> - for ordering data</li>
+					<li><code>data-filter</code> or <code>data-search</code> - for search data</li>
+				</ul>
+				<p>This example shows the use of <code>data-sort</code> and <code>data-filter</code> 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 <code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric data.</p>
+			</div>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td data-search="Tiger Nixon">T. Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td data-order="1303689600">Mon 25th Apr 11</td>
+						<td data-order="320800">$320,800/y</td>
+					</tr>
+					<tr>
+						<td data-search="Garrett Winters">G. Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td data-order="1311552000">Mon 25th Jul 11</td>
+						<td data-order="170750">$170,750/y</td>
+					</tr>
+					<tr>
+						<td data-search="Ashton Cox">A. Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td data-order="1231718400">Mon 12th Jan 09</td>
+						<td data-order="86000">$86,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Cedric Kelly">C. Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td data-order="1332979200">Thu 29th Mar 12</td>
+						<td data-order="433060">$433,060/y</td>
+					</tr>
+					<tr>
+						<td data-search="Airi Satou">A. Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td data-order="1227830400">Fri 28th Nov 08</td>
+						<td data-order="162700">$162,700/y</td>
+					</tr>
+					<tr>
+						<td data-search="Brielle Williamson">B. Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td data-order="1354406400">Sun 2nd Dec 12</td>
+						<td data-order="372000">$372,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Herrod Chandler">H. Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td data-order="1344211200">Mon 6th Aug 12</td>
+						<td data-order="137500">$137,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Rhona Davidson">R. Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td data-order="1287014400">Thu 14th Oct 10</td>
+						<td data-order="327900">$327,900/y</td>
+					</tr>
+					<tr>
+						<td data-search="Colleen Hurst">C. Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td data-order="1252972800">Tue 15th Sep 09</td>
+						<td data-order="205500">$205,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Sonya Frost">S. Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td data-order="1229126400">Sat 13th Dec 08</td>
+						<td data-order="103600">$103,600/y</td>
+					</tr>
+					<tr>
+						<td data-search="Jena Gaines">J. Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td data-order="1229644800">Fri 19th Dec 08</td>
+						<td data-order="90560">$90,560/y</td>
+					</tr>
+					<tr>
+						<td data-search="Quinn Flynn">Q. Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td data-order="1362268800">Sun 3rd Mar 13</td>
+						<td data-order="342000">$342,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Charde Marshall">C. Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td data-order="1224115200">Thu 16th Oct 08</td>
+						<td data-order="470600">$470,600/y</td>
+					</tr>
+					<tr>
+						<td data-search="Haley Kennedy">H. Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td data-order="1355788800">Tue 18th Dec 12</td>
+						<td data-order="313500">$313,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Tatyana Fitzpatrick">T. Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td data-order="1268784000">Wed 17th Mar 10</td>
+						<td data-order="385750">$385,750/y</td>
+					</tr>
+					<tr>
+						<td data-search="Michael Silva">M. Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td data-order="1353974400">Tue 27th Nov 12</td>
+						<td data-order="198500">$198,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Paul Byrd">P. Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td data-order="1276041600">Wed 9th Jun 10</td>
+						<td data-order="725000">$725,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Gloria Little">G. Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td data-order="1239321600">Fri 10th Apr 09</td>
+						<td data-order="237500">$237,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Bradley Greer">B. Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td data-order="1350086400">Sat 13th Oct 12</td>
+						<td data-order="132000">$132,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Dai Rios">D. Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td data-order="1348617600">Wed 26th Sep 12</td>
+						<td data-order="217500">$217,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Jenette Caldwell">J. Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td data-order="1315008000">Sat 3rd Sep 11</td>
+						<td data-order="345000">$345,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Yuri Berry">Y. Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td data-order="1245888000">Thu 25th Jun 09</td>
+						<td data-order="675000">$675,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Caesar Vance">C. Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td data-order="1323648000">Mon 12th Dec 11</td>
+						<td data-order="106450">$106,450/y</td>
+					</tr>
+					<tr>
+						<td data-search="Doris Wilder">D. Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td data-order="1284940800">Mon 20th Sep 10</td>
+						<td data-order="85600">$85,600/y</td>
+					</tr>
+					<tr>
+						<td data-search="Angelica Ramos">A. Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td data-order="1255046400">Fri 9th Oct 09</td>
+						<td data-order="1200000">$1,200,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Gavin Joyce">G. Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td data-order="1292976000">Wed 22nd Dec 10</td>
+						<td data-order="92575">$92,575/y</td>
+					</tr>
+					<tr>
+						<td data-search="Jennifer Chang">J. Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td data-order="1289692800">Sun 14th Nov 10</td>
+						<td data-order="357650">$357,650/y</td>
+					</tr>
+					<tr>
+						<td data-search="Brenden Wagner">B. Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td data-order="1307404800">Tue 7th Jun 11</td>
+						<td data-order="206850">$206,850/y</td>
+					</tr>
+					<tr>
+						<td data-search="Fiona Green">F. Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td data-order="1268265600">Thu 11th Mar 10</td>
+						<td data-order="850000">$850,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Shou Itou">S. Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td data-order="1313280000">Sun 14th Aug 11</td>
+						<td data-order="163000">$163,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Michelle House">M. House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td data-order="1306972800">Thu 2nd Jun 11</td>
+						<td data-order="95400">$95,400/y</td>
+					</tr>
+					<tr>
+						<td data-search="Suki Burks">S. Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td data-order="1256169600">Thu 22nd Oct 09</td>
+						<td data-order="114500">$114,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Prescott Bartlett">P. Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td data-order="1304726400">Sat 7th May 11</td>
+						<td data-order="145000">$145,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Gavin Cortez">G. Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td data-order="1224979200">Sun 26th Oct 08</td>
+						<td data-order="235500">$235,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Martena Mccray">M. Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td data-order="1299628800">Wed 9th Mar 11</td>
+						<td data-order="324050">$324,050/y</td>
+					</tr>
+					<tr>
+						<td data-search="Unity Butler">U. Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td data-order="1260316800">Wed 9th Dec 09</td>
+						<td data-order="85675">$85,675/y</td>
+					</tr>
+					<tr>
+						<td data-search="Howard Hatfield">H. Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td data-order="1229385600">Tue 16th Dec 08</td>
+						<td data-order="164500">$164,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Hope Fuentes">H. Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td data-order="1265932800">Fri 12th Feb 10</td>
+						<td data-order="109850">$109,850/y</td>
+					</tr>
+					<tr>
+						<td data-search="Vivian Harrell">V. Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td data-order="1234569600">Sat 14th Feb 09</td>
+						<td data-order="452500">$452,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Timothy Mooney">T. Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td data-order="1228953600">Thu 11th Dec 08</td>
+						<td data-order="136200">$136,200/y</td>
+					</tr>
+					<tr>
+						<td data-search="Jackson Bradshaw">J. Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td data-order="1222387200">Fri 26th Sep 08</td>
+						<td data-order="645750">$645,750/y</td>
+					</tr>
+					<tr>
+						<td data-search="Olivia Liang">O. Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td data-order="1296691200">Thu 3rd Feb 11</td>
+						<td data-order="234500">$234,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Bruno Nash">B. Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td data-order="1304380800">Tue 3rd May 11</td>
+						<td data-order="163500">$163,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Sakura Yamamoto">S. Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td data-order="1250640000">Wed 19th Aug 09</td>
+						<td data-order="139575">$139,575/y</td>
+					</tr>
+					<tr>
+						<td data-search="Thor Walton">T. Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td data-order="1376179200">Sun 11th Aug 13</td>
+						<td data-order="98540">$98,540/y</td>
+					</tr>
+					<tr>
+						<td data-search="Finn Camacho">F. Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td data-order="1246924800">Tue 7th Jul 09</td>
+						<td data-order="87500">$87,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Serge Baldwin">S. Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td data-order="1333929600">Mon 9th Apr 12</td>
+						<td data-order="138575">$138,575/y</td>
+					</tr>
+					<tr>
+						<td data-search="Zenaida Frank">Z. Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td data-order="1262563200">Mon 4th Jan 10</td>
+						<td data-order="125250">$125,250/y</td>
+					</tr>
+					<tr>
+						<td data-search="Zorita Serrano">Z. Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td data-order="1338508800">Fri 1st Jun 12</td>
+						<td data-order="115000">$115,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Jennifer Acosta">J. Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td data-order="1359676800">Fri 1st Feb 13</td>
+						<td data-order="75650">$75,650/y</td>
+					</tr>
+					<tr>
+						<td data-search="Cara Stevens">C. Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td data-order="1323129600">Tue 6th Dec 11</td>
+						<td data-order="145600">$145,600/y</td>
+					</tr>
+					<tr>
+						<td data-search="Hermione Butler">H. Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td data-order="1300665600">Mon 21st Mar 11</td>
+						<td data-order="356250">$356,250/y</td>
+					</tr>
+					<tr>
+						<td data-search="Lael Greer">L. Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td data-order="1235692800">Fri 27th Feb 09</td>
+						<td data-order="103500">$103,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Jonas Alexander">J. Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td data-order="1279065600">Wed 14th Jul 10</td>
+						<td data-order="86500">$86,500/y</td>
+					</tr>
+					<tr>
+						<td data-search="Shad Decker">S. Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td data-order="1226534400">Thu 13th Nov 08</td>
+						<td data-order="183000">$183,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Michael Bruce">M. Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td data-order="1309132800">Mon 27th Jun 11</td>
+						<td data-order="183000">$183,000/y</td>
+					</tr>
+					<tr>
+						<td data-search="Donna Snider">D. Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td data-order="1295913600">Tue 25th Jan 11</td>
+						<td data-order="112000">$112,000/y</td>
+					</tr>
+				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable();
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="./dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="./column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li class="active">
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../ajax/index.html">Ajax</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../ajax/simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="../ajax/null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/advanced_init/html5-data-options.html

@@ -0,0 +1,902 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - HTML5 data-* attributes - table options</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+$(document).ready(function() {
+	$('#example').DataTable();
+} );
+
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>HTML5 data-* attributes - table options</span></h1>
+			<div class="info">
+				<p>As of DataTables 1.10.5 it is now possible to define <a href="//datatables.net/reference/option">initialisation options</a> using HTML5 <code>data-*</code>
+				attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the
+				<code>data-*</code> attributes taking priority).</p>
+				<p>Please note that the attribute values must contain valid JSON data or a Javascript primitive, as required by <a href=
+				"http://api.jquery.com/data/#data-html5">jQuery's <code>$().data()</code> method</a>. This means that double quotes should be used inside the attribute if needed
+				for a string (see the <code>data-order</code> in this example).</p>
+				<p>Additionally, jQuery will convert a dashed string into the camel-case notation used by DataTables for its options. For example <code>data-page-length</code> is
+				used to represent <a href="//datatables.net/reference/option/pageLength"><code class="option" title="DataTables initialisation option">pageLength</code></a>.</p>
+				<p>The table below shows the use of <a href="//datatables.net/reference/option/pageLength"><code class="option" title=
+				"DataTables initialisation option">pageLength</code></a> and <a href="//datatables.net/reference/option/order"><code class="option" title=
+				"DataTables initialisation option">order</code></a> on the main table. Column options can also be defined on the table column cells, as shown by the use of the
+				<a href="//datatables.net/reference/option/columns.orderable"><code class="option" title="DataTables initialisation option">columns.orderable</code></a> option on
+				the fifth column below.</p>
+			</div>
+			<div class="demo-html"></div>
+			<table id="example" class="display" width="100%" data-page-length="25" data-order="[[ 1, &quot;asc&quot; ]]">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th data-orderable="false">Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable();
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="./dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="./column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li class="active">
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../ajax/index.html">Ajax</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../ajax/simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="../ajax/null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/advanced_init/html_sort.html

@@ -1,197 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$('#example').dataTable();
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables HTML sorting example
-			</div>
-
-			<h1>Preamble</h1>
-			<p>DataTables will attempt to automatically detect the data types that your table contains, allowing it to accurately sort and filter this data. This example shows automatic type detection of HTML information - note that the sorting is correct on the second column for the visible information. Additional data types can be added through <a href="http://datatables.net/plug-ins/">plug-ins</a>.
-			<p>Note that prior to DataTables 1.7 the HTML type was not automatically detected, and it was necessary to specify the sType for the column - this is now not needed as seen in this example. If you do want to be able to sort and filter on the HTML information you can specify the sType for the column as 'string'.</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th>Reflection</th>
-			<th class="html">Link</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>DataTables</td>
-			<td><a href="http://www.sprymedia.co.uk/article/DataTables">DataTables</a></td>
-		</tr>
-		<tr>
-			<td>Integrity</td>
-			<td><a href="http://www.sprymedia.co.uk/article/Integrity">A link to Integrity</a></td>
-		</tr>
-		<tr>
-			<td>Integrity</td>
-			<td><a href="http://www.sprymedia.co.uk/article/Integrity">Integrity</a></td>
-		</tr>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable();
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/advanced_init/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<title>DataTables examples - Advanced initialisation</title>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Advanced initialisation</span></h1>
+			<div class="info">
+				<p>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.</p>
+				<p>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!</p>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="./events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="./dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="./column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/advanced_init/localstorage.html

@@ -1,612 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$('#example').dataTable( {
-					"bStateSave": true,
-					"fnStateSave": function (oSettings, oData) {
-						localStorage.setItem( 'DataTables_'+window.location.pathname, JSON.stringify(oData) );
-					},
-					"fnStateLoad": function (oSettings) {
-						var data = localStorage.getItem('DataTables_'+window.location.pathname);
-						return JSON.parse(data);
-					}
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables - state saving with localStorage
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>The state saving storage method that is built into DataTables makes use of cookies for compatibility with all browsers. However, cookies have a number of disadvantagies such as requiring increased HTTP bandwidth and a 4K limit. The W3C Web Storage specification defines <a href="https://developer.mozilla.org/en/DOM/Storage">localStorage</a> as a local storage method which we can use in DataTables to store state without the inherent issues in using cookies.</p>
-			<p>This example shows the use of <i>fnStateSave</i> and <i>fnStateLoad</i> to very simply store the table state in localStorage and then load it back again when needed.</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr class="gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 4.0</td>
-			<td>Win 95+</td>
-			<td class="center">4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr class="gradeC">
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeU">
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable( {
-		"bStateSave": true
-	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/advanced_init/object_dom_read.html

@@ -0,0 +1,926 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Read HTML to data objects</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+$(document).ready(function() {
+	$('#example').DataTable({
+		"columns": [
+			{ "data": "name" },
+			{ "data": "position" },
+			{ "data": "office" },
+			{ "data": "age" },
+			{ "data": "start_date" },
+			{ "data": "salary" }
+		]
+	});
+} );
+
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Read HTML to data objects</span></h1>
+			<div class="info">
+				<p>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.</p>
+				<p>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 <a href=
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> initialisation option to
+				define how you want the data to be stored. Typically <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
+				"DataTables initialisation option">columns.data</code></a> is used with <a href="../ajax/objects.html">Ajax sourced data</a> to tell DataTables where to read data
+				from, but as can be seen here it also tells DataTables where to write the data to.</p>
+				<p>This ability to store data into an object can be very useful when working with the DataTables API after the table has been initialised.</p>
+				<p>In the example shown here, the data read from each row in the table is read into a Javascript object with the structure:</p>
+				<pre><code class="multiline language-js">{
+	"name": "...",
+	"position": "...",
+	"office": "...",
+	"age": "...",
+	"start_date": "...",
+	"salary": "..."
+}
+</code></pre>
+				<p>Please note that this feature requires DataTables 1.10.3 or newer.</p>
+			</div>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable({
+		&quot;columns&quot;: [
+			{ &quot;data&quot;: &quot;name&quot; },
+			{ &quot;data&quot;: &quot;position&quot; },
+			{ &quot;data&quot;: &quot;office&quot; },
+			{ &quot;data&quot;: &quot;age&quot; },
+			{ &quot;data&quot;: &quot;start_date&quot; },
+			{ &quot;data&quot;: &quot;salary&quot; }
+		]
+	});
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="./dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="./column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li class="active">
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../ajax/index.html">Ajax</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../ajax/simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="../ajax/null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/advanced_init/sort_direction_control.html

@@ -0,0 +1,922 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Order direction sequence control</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"aoColumns": [
+			null,
+			null,
+			{ "orderSequence": [ "asc" ] },
+			{ "orderSequence": [ "desc", "asc", "asc" ] },
+			{ "orderSequence": [ "desc" ] },
+			null
+		]
+	} );
+} );
+
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Order direction sequence control</span></h1>
+			<div class="info">
+				<p>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 <a href="//datatables.net/reference/option/columns.orderSequence"><code class="option" title=
+				"DataTables initialisation option">columns.orderSequence</code></a> 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.</p>
+				<p>The example below shows:</p>
+				<ul class="markdown">
+					<li>Column 1 - default ordering</li>
+					<li>Column 2 - default ordering</li>
+					<li>Column 3 - ascending ordering only</li>
+					<li>Column 4 - descending ordering, followed by ascending and then ascending again</li>
+					<li>Column 5 - descending ordering only</li>
+					<li>Column 6 - default ordering</li>
+				</ul>
+				<p>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 used and therefore applied across all columns.</p>
+			</div>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable( {
+		&quot;aoColumns&quot;: [
+			null,
+			null,
+			{ &quot;orderSequence&quot;: [ &quot;asc&quot; ] },
+			{ &quot;orderSequence&quot;: [ &quot;desc&quot;, &quot;asc&quot;, &quot;asc&quot; ] },
+			{ &quot;orderSequence&quot;: [ &quot;desc&quot; ] },
+			null
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Advanced initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="./dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="./column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li class="active">
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../ajax/index.html">Ajax</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../ajax/simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="../ajax/null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/advanced_init/sorting_control.html

@@ -1,625 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$('#example').dataTable( {
-					"aoColumns": [
-						null,
-						{ "asSorting": [ "asc" ] },
-						{ "asSorting": [ "desc", "asc", "asc" ] },
-						{ "asSorting": [ "desc" ] },
-						null
-					]
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables sorting direction control example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>At times you may wish to change the default sorting direction for columns (all or some of them) to be 'descending' rather than DataTables' default ascending. This can be done through the use of the aoColumns[].asSorting initialisation parameter. This parameter also allows you to limit the sorting to a single direction, or you could add complex behaviour to the sorting interaction.</p>
-			<p>The example below shows:</p>
-			<ul>
-				<li>Column 1 - default sorting</li>
-				<li>Column 2 - ascending sorting only</li>
-				<li>Column 3 - descending sorting, followed by ascending and then ascending again</li>
-				<li>Column 4 - descending sorting only</li>
-				<li>Column 5 - default sorting</li>
-			</ul>
-			<p>It's worth noting that I don't have a good use case for when you might what to use the complex behaviour that is possible with this, but it is there should you want to use it!</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr class="gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 4.0</td>
-			<td>Win 95+</td>
-			<td class="center">4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr class="gradeC">
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeU">
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable( {
-		"aoColumns": [
-			null,
-			{ "asSorting": [ "asc" ] },
-			{ "asSorting": [ "desc", "asc", "asc" ] },
-			{ "asSorting": [ "desc" ] },
-			null
-		]
-	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/ajax/ajax.html

@@ -1,208 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				var oTable = $('#example').dataTable( {
-					"bProcessing": true,
-					"sAjaxSource": "sources/arrays.txt"
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables AJAX source example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>Although DataTables is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have DataTables go to that source with an XHR call and load data from there. This example shows the latter method in action. DataTables expects an object with an array called "aaData" with the data source.</p>
-			
-			<h1>Live example</h1>
-			<div id="dynamic">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th width="20%">Rendering engine</th>
-			<th width="25%">Browser</th>
-			<th width="25%">Platform(s)</th>
-			<th width="15%">Engine version</th>
-			<th width="15%">CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable( {
-		"bProcessing": true,
-		"sAjaxSource": "sources/arrays.txt"
-	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-
-			<h1>Server response</h1>
-			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
-			<pre id="latest_xhr" class="brush: js;"></pre>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/ajax/custom_data_flat.html

@@ -0,0 +1,469 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Flat array data source</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"ajax": {
+			"url": "data/objects_root_array.txt",
+			"dataSrc": ""
+		},
+		"columns": [
+			{ "data": "name" },
+			{ "data": "position" },
+			{ "data": "office" },
+			{ "data": "extn" },
+			{ "data": "start_date" },
+			{ "data": "salary" }
+		]
+	} );
+} );
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Flat array data source</span></h1>
+			<div class="info">
+				<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
+				<code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href=
+				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
+				<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
+				of ways in which it can be used:</p>
+				<ul class="markdown">
+					<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
+					<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an array.</li>
+					<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - 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.</li>
+				</ul>
+				<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
+				"DataTables initialisation option">ajax.dataSrc</code></a> 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.</p>
+			</div>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable( {
+		&quot;ajax&quot;: {
+			&quot;url&quot;: &quot;data/objects_root_array.txt&quot;,
+			&quot;dataSrc&quot;: &quot;&quot;
+		},
+		&quot;columns&quot;: [
+			{ &quot;data&quot;: &quot;name&quot; },
+			{ &quot;data&quot;: &quot;position&quot; },
+			{ &quot;data&quot;: &quot;office&quot; },
+			{ &quot;data&quot;: &quot;extn&quot; },
+			{ &quot;data&quot;: &quot;start_date&quot; },
+			{ &quot;data&quot;: &quot;salary&quot; }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Ajax</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li class="active">
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/ajax/custom_data_property.html

@@ -1,210 +1,454 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 <html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				var oTable = $('#example').dataTable( {
-					"bProcessing": true,
-					"sAjaxSource": "sources/custom_prop.txt",
-					"sAjaxDataProp": "demo"
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables AJAX source example - reading an arbitrary data source property
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>By default DataTables will read the data to show in the table from the <i>aaData</i> property of the object returned from the server. By using the initialisation option <b>sAjaxDataProp</b> you can customise this to whatever you wish. This examples shows it being set to 'demo'. Note that this option will also work with server-side processing. Additionally, it is possible to set <b>sAjaxDataProp</b> to be an empty string, which results in DataTables treating the given data source as the table data array (rather than as property of an object).</p>
-			
-			<h1>Live example</h1>
-			<div id="dynamic">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th width="20%">Rendering engine</th>
-			<th width="25%">Browser</th>
-			<th width="25%">Platform(s)</th>
-			<th width="15%">Engine version</th>
-			<th width="15%">CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable( {
-		"bProcessing": true,
-		"sAjaxSource": "sources/custom_prop.txt",
-		"sAjaxDataProp": "demo"
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Custom data source property</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"ajax": {
+			"url": "data/arrays_custom_prop.txt",
+			"dataSrc": "demo"
+		}
 	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+} );
 
-			<h1>Server response</h1>
-			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
-			<pre id="latest_xhr" class="brush: js;"></pre>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Custom data source property</span></h1>
+			<div class="info">
+				<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
+				<code>{ "data": [...] }</code>). This can easily be changed by using the <code>dataSrc</code> option of the <a href=
+				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
+				<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
+				of ways in which it can be used:</p>
+				<ul class="markdown">
+					<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
+					<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an array.</li>
+					<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - 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.</li>
 				</ul>
+				<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
+				"DataTables initialisation option">ajax.dataSrc</code></a> being used as a string to get the data from a different source property, in this case <code class=
+				"string" title="String">demo</code>, but it could be any value, including a nested property using standard dotted Javascript object notation.</p>
+				<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
 			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable( {
+		&quot;ajax&quot;: {
+			&quot;url&quot;: &quot;data/arrays_custom_prop.txt&quot;,
+			&quot;dataSrc&quot;: &quot;demo&quot;
+		}
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
 			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Ajax</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li class="active">
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
 			</div>
 		</div>
-	</body>
+	</section>
+</body>
 </html>

examples/ajax/data/arrays.txt

@@ -0,0 +1,460 @@
+{
+    "data": [
+        [
+            "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"
+        ],
+        [
+            "Cedric Kelly",
+            "Senior Javascript Developer",
+            "Edinburgh",
+            "6224",
+            "2012\/03\/29",
+            "$433,060"
+        ],
+        [
+            "Airi Satou",
+            "Accountant",
+            "Tokyo",
+            "5407",
+            "2008\/11\/28",
+            "$162,700"
+        ],
+        [
+            "Brielle Williamson",
+            "Integration Specialist",
+            "New York",
+            "4804",
+            "2012\/12\/02",
+            "$372,000"
+        ],
+        [
+            "Herrod Chandler",
+            "Sales Assistant",
+            "San Francisco",
+            "9608",
+            "2012\/08\/06",
+            "$137,500"
+        ],
+        [
+            "Rhona Davidson",
+            "Integration Specialist",
+            "Tokyo",
+            "6200",
+            "2010\/10\/14",
+            "$327,900"
+        ],
+        [
+            "Colleen Hurst",
+            "Javascript Developer",
+            "San Francisco",
+            "2360",
+            "2009\/09\/15",
+            "$205,500"
+        ],
+        [
+            "Sonya Frost",
+            "Software Engineer",
+            "Edinburgh",
+            "1667",
+            "2008\/12\/13",
+            "$103,600"
+        ],
+        [
+            "Jena Gaines",
+            "Office Manager",
+            "London",
+            "3814",
+            "2008\/12\/19",
+            "$90,560"
+        ],
+        [
+            "Quinn Flynn",
+            "Support Lead",
+            "Edinburgh",
+            "9497",
+            "2013\/03\/03",
+            "$342,000"
+        ],
+        [
+            "Charde Marshall",
+            "Regional Director",
+            "San Francisco",
+            "6741",
+            "2008\/10\/16",
+            "$470,600"
+        ],
+        [
+            "Haley Kennedy",
+            "Senior Marketing Designer",
+            "London",
+            "3597",
+            "2012\/12\/18",
+            "$313,500"
+        ],
+        [
+            "Tatyana Fitzpatrick",
+            "Regional Director",
+            "London",
+            "1965",
+            "2010\/03\/17",
+            "$385,750"
+        ],
+        [
+            "Michael Silva",
+            "Marketing Designer",
+            "London",
+            "1581",
+            "2012\/11\/27",
+            "$198,500"
+        ],
+        [
+            "Paul Byrd",
+            "Chief Financial Officer (CFO)",
+            "New York",
+            "3059",
+            "2010\/06\/09",
+            "$725,000"
+        ],
+        [
+            "Gloria Little",
+            "Systems Administrator",
+            "New York",
+            "1721",
+            "2009\/04\/10",
+            "$237,500"
+        ],
+        [
+            "Bradley Greer",
+            "Software Engineer",
+            "London",
+            "2558",
+            "2012\/10\/13",
+            "$132,000"
+        ],
+        [
+            "Dai Rios",
+            "Personnel Lead",
+            "Edinburgh",
+            "2290",
+            "2012\/09\/26",
+            "$217,500"
+        ],
+        [
+            "Jenette Caldwell",
+            "Development Lead",
+            "New York",
+            "1937",
+            "2011\/09\/03",
+            "$345,000"
+        ],
+        [
+            "Yuri Berry",
+            "Chief Marketing Officer (CMO)",
+            "New York",
+            "6154",
+            "2009\/06\/25",
+            "$675,000"
+        ],
+        [
+            "Caesar Vance",
+            "Pre-Sales Support",
+            "New York",
+            "8330",
+            "2011\/12\/12",
+            "$106,450"
+        ],
+        [
+            "Doris Wilder",
+            "Sales Assistant",
+            "Sidney",
+            "3023",
+            "2010\/09\/20",
+            "$85,600"
+        ],
+        [
+            "Angelica Ramos",
+            "Chief Executive Officer (CEO)",
+            "London",
+            "5797",
+            "2009\/10\/09",
+            "$1,200,000"
+        ],
+        [
+            "Gavin Joyce",
+            "Developer",
+            "Edinburgh",
+            "8822",
+            "2010\/12\/22",
+            "$92,575"
+        ],
+        [
+            "Jennifer Chang",
+            "Regional Director",
+            "Singapore",
+            "9239",
+            "2010\/11\/14",
+            "$357,650"
+        ],
+        [
+            "Brenden Wagner",
+            "Software Engineer",
+            "San Francisco",
+            "1314",
+            "2011\/06\/07",
+            "$206,850"
+        ],
+        [
+            "Fiona Green",
+            "Chief Operating Officer (COO)",
+            "San Francisco",
+            "2947",
+            "2010\/03\/11",
+            "$850,000"
+        ],
+        [
+            "Shou Itou",
+            "Regional Marketing",
+            "Tokyo",
+            "8899",
+            "2011\/08\/14",
+            "$163,000"
+        ],
+        [
+            "Michelle House",
+            "Integration Specialist",
+            "Sidney",
+            "2769",
+            "2011\/06\/02",
+            "$95,400"
+        ],
+        [
+            "Suki Burks",
+            "Developer",
+            "London",
+            "6832",
+            "2009\/10\/22",
+            "$114,500"
+        ],
+        [
+            "Prescott Bartlett",
+            "Technical Author",
+            "London",
+            "3606",
+            "2011\/05\/07",
+            "$145,000"
+        ],
+        [
+            "Gavin Cortez",
+            "Team Leader",
+            "San Francisco",
+            "2860",
+            "2008\/10\/26",
+            "$235,500"
+        ],
+        [
+            "Martena Mccray",
+            "Post-Sales support",
+            "Edinburgh",
+            "8240",
+            "2011\/03\/09",
+            "$324,050"
+        ],
+        [
+            "Unity Butler",
+            "Marketing Designer",
+            "San Francisco",
+            "5384",
+            "2009\/12\/09",
+            "$85,675"
+        ],
+        [
+            "Howard Hatfield",
+            "Office Manager",
+            "San Francisco",
+            "7031",
+            "2008\/12\/16",
+            "$164,500"
+        ],
+        [
+            "Hope Fuentes",
+            "Secretary",
+            "San Francisco",
+            "6318",
+            "2010\/02\/12",
+            "$109,850"
+        ],
+        [
+            "Vivian Harrell",
+            "Financial Controller",
+            "San Francisco",
+            "9422",
+            "2009\/02\/14",
+            "$452,500"
+        ],
+        [
+            "Timothy Mooney",
+            "Office Manager",
+            "London",
+            "7580",
+            "2008\/12\/11",
+            "$136,200"
+        ],
+        [
+            "Jackson Bradshaw",
+            "Director",
+            "New York",
+            "1042",
+            "2008\/09\/26",
+            "$645,750"
+        ],
+        [
+            "Olivia Liang",
+            "Support Engineer",
+            "Singapore",
+            "2120",
+            "2011\/02\/03",
+            "$234,500"
+        ],
+        [
+            "Bruno Nash",
+            "Software Engineer",
+            "London",
+            "6222",
+            "2011\/05\/03",
+            "$163,500"
+        ],
+        [
+            "Sakura Yamamoto",
+            "Support Engineer",
+            "Tokyo",
+            "9383",
+            "2009\/08\/19",
+            "$139,575"
+        ],
+        [
+            "Thor Walton",
+            "Developer",
+            "New York",
+            "8327",
+            "2013\/08\/11",
+            "$98,540"
+        ],
+        [
+            "Finn Camacho",
+            "Support Engineer",
+            "San Francisco",
+            "2927",
+            "2009\/07\/07",
+            "$87,500"
+        ],
+        [
+            "Serge Baldwin",
+            "Data Coordinator",
+            "Singapore",
+            "8352",
+            "2012\/04\/09",
+            "$138,575"
+        ],
+        [
+            "Zenaida Frank",
+            "Software Engineer",
+            "New York",
+            "7439",
+            "2010\/01\/04",
+            "$125,250"
+        ],
+        [
+            "Zorita Serrano",
+            "Software Engineer",
+            "San Francisco",
+            "4389",
+            "2012\/06\/01",
+            "$115,000"
+        ],
+        [
+            "Jennifer Acosta",
+            "Junior Javascript Developer",
+            "Edinburgh",
+            "3431",
+            "2013\/02\/01",
+            "$75,650"
+        ],
+        [
+            "Cara Stevens",
+            "Sales Assistant",
+            "New York",
+            "3990",
+            "2011\/12\/06",
+            "$145,600"
+        ],
+        [
+            "Hermione Butler",
+            "Regional Director",
+            "London",
+            "1016",
+            "2011\/03\/21",
+            "$356,250"
+        ],
+        [
+            "Lael Greer",
+            "Systems Administrator",
+            "London",
+            "6733",
+            "2009\/02\/27",
+            "$103,500"
+        ],
+        [
+            "Jonas Alexander",
+            "Developer",
+            "San Francisco",
+            "8196",
+            "2010\/07\/14",
+            "$86,500"
+        ],
+        [
+            "Shad Decker",
+            "Regional Director",
+            "Edinburgh",
+            "6373",
+            "2008\/11\/13",
+            "$183,000"
+        ],
+        [
+            "Michael Bruce",
+            "Javascript Developer",
+            "Singapore",
+            "5384",
+            "2011\/06\/27",
+            "$183,000"
+        ],
+        [
+            "Donna Snider",
+            "Customer Support",
+            "New York",
+            "4226",
+            "2011\/01\/25",
+            "$112,000"
+        ]
+    ]
+}

examples/ajax/data/arrays_custom_prop.txt

@@ -0,0 +1,460 @@
+{
+    "demo": [
+        [
+            "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"
+        ],
+        [
+            "Cedric Kelly",
+            "Senior Javascript Developer",
+            "Edinburgh",
+            "6224",
+            "2012\/03\/29",
+            "$433,060"
+        ],
+        [
+            "Airi Satou",
+            "Accountant",
+            "Tokyo",
+            "5407",
+            "2008\/11\/28",
+            "$162,700"
+        ],
+        [
+            "Brielle Williamson",
+            "Integration Specialist",
+            "New York",
+            "4804",
+            "2012\/12\/02",
+            "$372,000"
+        ],
+        [
+            "Herrod Chandler",
+            "Sales Assistant",
+            "San Francisco",
+            "9608",
+            "2012\/08\/06",
+            "$137,500"
+        ],
+        [
+            "Rhona Davidson",
+            "Integration Specialist",
+            "Tokyo",
+            "6200",
+            "2010\/10\/14",
+            "$327,900"
+        ],
+        [
+            "Colleen Hurst",
+            "Javascript Developer",
+            "San Francisco",
+            "2360",
+            "2009\/09\/15",
+            "$205,500"
+        ],
+        [
+            "Sonya Frost",
+            "Software Engineer",
+            "Edinburgh",
+            "1667",
+            "2008\/12\/13",
+            "$103,600"
+        ],
+        [
+            "Jena Gaines",
+            "Office Manager",
+            "London",
+            "3814",
+            "2008\/12\/19",
+            "$90,560"
+        ],
+        [
+            "Quinn Flynn",
+            "Support Lead",
+            "Edinburgh",
+            "9497",
+            "2013\/03\/03",
+            "$342,000"
+        ],
+        [
+            "Charde Marshall",
+            "Regional Director",
+            "San Francisco",
+            "6741",
+            "2008\/10\/16",
+            "$470,600"
+        ],
+        [
+            "Haley Kennedy",
+            "Senior Marketing Designer",
+            "London",
+            "3597",
+            "2012\/12\/18",
+            "$313,500"
+        ],
+        [
+            "Tatyana Fitzpatrick",
+            "Regional Director",
+            "London",
+            "1965",
+            "2010\/03\/17",
+            "$385,750"
+        ],
+        [
+            "Michael Silva",
+            "Marketing Designer",
+            "London",
+            "1581",
+            "2012\/11\/27",
+            "$198,500"
+        ],
+        [
+            "Paul Byrd",
+            "Chief Financial Officer (CFO)",
+            "New York",
+            "3059",
+            "2010\/06\/09",
+            "$725,000"
+        ],
+        [
+            "Gloria Little",
+            "Systems Administrator",
+            "New York",
+            "1721",
+            "2009\/04\/10",
+            "$237,500"
+        ],
+        [
+            "Bradley Greer",
+            "Software Engineer",
+            "London",
+            "2558",
+            "2012\/10\/13",
+            "$132,000"
+        ],
+        [
+            "Dai Rios",
+            "Personnel Lead",
+            "Edinburgh",
+            "2290",
+            "2012\/09\/26",
+            "$217,500"
+        ],
+        [
+            "Jenette Caldwell",
+            "Development Lead",
+            "New York",
+            "1937",
+            "2011\/09\/03",
+            "$345,000"
+        ],
+        [
+            "Yuri Berry",
+            "Chief Marketing Officer (CMO)",
+            "New York",
+            "6154",
+            "2009\/06\/25",
+            "$675,000"
+        ],
+        [
+            "Caesar Vance",
+            "Pre-Sales Support",
+            "New York",
+            "8330",
+            "2011\/12\/12",
+            "$106,450"
+        ],
+        [
+            "Doris Wilder",
+            "Sales Assistant",
+            "Sidney",
+            "3023",
+            "2010\/09\/20",
+            "$85,600"
+        ],
+        [
+            "Angelica Ramos",
+            "Chief Executive Officer (CEO)",
+            "London",
+            "5797",
+            "2009\/10\/09",
+            "$1,200,000"
+        ],
+        [
+            "Gavin Joyce",
+            "Developer",
+            "Edinburgh",
+            "8822",
+            "2010\/12\/22",
+            "$92,575"
+        ],
+        [
+            "Jennifer Chang",
+            "Regional Director",
+            "Singapore",
+            "9239",
+            "2010\/11\/14",
+            "$357,650"
+        ],
+        [
+            "Brenden Wagner",
+            "Software Engineer",
+            "San Francisco",
+            "1314",
+            "2011\/06\/07",
+            "$206,850"
+        ],
+        [
+            "Fiona Green",
+            "Chief Operating Officer (COO)",
+            "San Francisco",
+            "2947",
+            "2010\/03\/11",
+            "$850,000"
+        ],
+        [
+            "Shou Itou",
+            "Regional Marketing",
+            "Tokyo",
+            "8899",
+            "2011\/08\/14",
+            "$163,000"
+        ],
+        [
+            "Michelle House",
+            "Integration Specialist",
+            "Sidney",
+            "2769",
+            "2011\/06\/02",
+            "$95,400"
+        ],
+        [
+            "Suki Burks",
+            "Developer",
+            "London",
+            "6832",
+            "2009\/10\/22",
+            "$114,500"
+        ],
+        [
+            "Prescott Bartlett",
+            "Technical Author",
+            "London",
+            "3606",
+            "2011\/05\/07",
+            "$145,000"
+        ],
+        [
+            "Gavin Cortez",
+            "Team Leader",
+            "San Francisco",
+            "2860",
+            "2008\/10\/26",
+            "$235,500"
+        ],
+        [
+            "Martena Mccray",
+            "Post-Sales support",
+            "Edinburgh",
+            "8240",
+            "2011\/03\/09",
+            "$324,050"
+        ],
+        [
+            "Unity Butler",
+            "Marketing Designer",
+            "San Francisco",
+            "5384",
+            "2009\/12\/09",
+            "$85,675"
+        ],
+        [
+            "Howard Hatfield",
+            "Office Manager",
+            "San Francisco",
+            "7031",
+            "2008\/12\/16",
+            "$164,500"
+        ],
+        [
+            "Hope Fuentes",
+            "Secretary",
+            "San Francisco",
+            "6318",
+            "2010\/02\/12",
+            "$109,850"
+        ],
+        [
+            "Vivian Harrell",
+            "Financial Controller",
+            "San Francisco",
+            "9422",
+            "2009\/02\/14",
+            "$452,500"
+        ],
+        [
+            "Timothy Mooney",
+            "Office Manager",
+            "London",
+            "7580",
+            "2008\/12\/11",
+            "$136,200"
+        ],
+        [
+            "Jackson Bradshaw",
+            "Director",
+            "New York",
+            "1042",
+            "2008\/09\/26",
+            "$645,750"
+        ],
+        [
+            "Olivia Liang",
+            "Support Engineer",
+            "Singapore",
+            "2120",
+            "2011\/02\/03",
+            "$234,500"
+        ],
+        [
+            "Bruno Nash",
+            "Software Engineer",
+            "London",
+            "6222",
+            "2011\/05\/03",
+            "$163,500"
+        ],
+        [
+            "Sakura Yamamoto",
+            "Support Engineer",
+            "Tokyo",
+            "9383",
+            "2009\/08\/19",
+            "$139,575"
+        ],
+        [
+            "Thor Walton",
+            "Developer",
+            "New York",
+            "8327",
+            "2013\/08\/11",
+            "$98,540"
+        ],
+        [
+            "Finn Camacho",
+            "Support Engineer",
+            "San Francisco",
+            "2927",
+            "2009\/07\/07",
+            "$87,500"
+        ],
+        [
+            "Serge Baldwin",
+            "Data Coordinator",
+            "Singapore",
+            "8352",
+            "2012\/04\/09",
+            "$138,575"
+        ],
+        [
+            "Zenaida Frank",
+            "Software Engineer",
+            "New York",
+            "7439",
+            "2010\/01\/04",
+            "$125,250"
+        ],
+        [
+            "Zorita Serrano",
+            "Software Engineer",
+            "San Francisco",
+            "4389",
+            "2012\/06\/01",
+            "$115,000"
+        ],
+        [
+            "Jennifer Acosta",
+            "Junior Javascript Developer",
+            "Edinburgh",
+            "3431",
+            "2013\/02\/01",
+            "$75,650"
+        ],
+        [
+            "Cara Stevens",
+            "Sales Assistant",
+            "New York",
+            "3990",
+            "2011\/12\/06",
+            "$145,600"
+        ],
+        [
+            "Hermione Butler",
+            "Regional Director",
+            "London",
+            "1016",
+            "2011\/03\/21",
+            "$356,250"
+        ],
+        [
+            "Lael Greer",
+            "Systems Administrator",
+            "London",
+            "6733",
+            "2009\/02\/27",
+            "$103,500"
+        ],
+        [
+            "Jonas Alexander",
+            "Developer",
+            "San Francisco",
+            "8196",
+            "2010\/07\/14",
+            "$86,500"
+        ],
+        [
+            "Shad Decker",
+            "Regional Director",
+            "Edinburgh",
+            "6373",
+            "2008\/11\/13",
+            "$183,000"
+        ],
+        [
+            "Michael Bruce",
+            "Javascript Developer",
+            "Singapore",
+            "5384",
+            "2011\/06\/27",
+            "$183,000"
+        ],
+        [
+            "Donna Snider",
+            "Customer Support",
+            "New York",
+            "4226",
+            "2011\/01\/25",
+            "$112,000"
+        ]
+    ]
+}

examples/ajax/data/arrays_subobjects.txt

@@ -0,0 +1,688 @@
+{
+    "data": [
+        {
+            "0": "Tiger Nixon",
+            "hr": {
+                "position": "System Architect",
+                "salary": "$320,800",
+                "start_date": "2011\/04\/25"
+            },
+            "contact": {
+                "office": "Edinburgh",
+                "extn": "5421"
+            }
+        },
+        {
+            "0": "Garrett Winters",
+            "hr": {
+                "position": "Accountant",
+                "salary": "$170,750",
+                "start_date": "2011\/07\/25"
+            },
+            "contact": {
+                "office": "Tokyo",
+                "extn": "8422"
+            }
+        },
+        {
+            "0": "Ashton Cox",
+            "hr": {
+                "position": "Junior Technical Author",
+                "salary": "$86,000",
+                "start_date": "2009\/01\/12"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "1562"
+            }
+        },
+        {
+            "0": "Cedric Kelly",
+            "hr": {
+                "position": "Senior Javascript Developer",
+                "salary": "$433,060",
+                "start_date": "2012\/03\/29"
+            },
+            "contact": {
+                "office": "Edinburgh",
+                "extn": "6224"
+            }
+        },
+        {
+            "0": "Airi Satou",
+            "hr": {
+                "position": "Accountant",
+                "salary": "$162,700",
+                "start_date": "2008\/11\/28"
+            },
+            "contact": {
+                "office": "Tokyo",
+                "extn": "5407"
+            }
+        },
+        {
+            "0": "Brielle Williamson",
+            "hr": {
+                "position": "Integration Specialist",
+                "salary": "$372,000",
+                "start_date": "2012\/12\/02"
+            },
+            "contact": {
+                "office": "New York",
+                "extn": "4804"
+            }
+        },
+        {
+            "0": "Herrod Chandler",
+            "hr": {
+                "position": "Sales Assistant",
+                "salary": "$137,500",
+                "start_date": "2012\/08\/06"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "9608"
+            }
+        },
+        {
+            "0": "Rhona Davidson",
+            "hr": {
+                "position": "Integration Specialist",
+                "salary": "$327,900",
+                "start_date": "2010\/10\/14"
+            },
+            "contact": {
+                "office": "Tokyo",
+                "extn": "6200"
+            }
+        },
+        {
+            "0": "Colleen Hurst",
+            "hr": {
+                "position": "Javascript Developer",
+                "salary": "$205,500",
+                "start_date": "2009\/09\/15"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "2360"
+            }
+        },
+        {
+            "0": "Sonya Frost",
+            "hr": {
+                "position": "Software Engineer",
+                "salary": "$103,600",
+                "start_date": "2008\/12\/13"
+            },
+            "contact": {
+                "office": "Edinburgh",
+                "extn": "1667"
+            }
+        },
+        {
+            "0": "Jena Gaines",
+            "hr": {
+                "position": "Office Manager",
+                "salary": "$90,560",
+                "start_date": "2008\/12\/19"
+            },
+            "contact": {
+                "office": "London",
+                "extn": "3814"
+            }
+        },
+        {
+            "0": "Quinn Flynn",
+            "hr": {
+                "position": "Support Lead",
+                "salary": "$342,000",
+                "start_date": "2013\/03\/03"
+            },
+            "contact": {
+                "office": "Edinburgh",
+                "extn": "9497"
+            }
+        },
+        {
+            "0": "Charde Marshall",
+            "hr": {
+                "position": "Regional Director",
+                "salary": "$470,600",
+                "start_date": "2008\/10\/16"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "6741"
+            }
+        },
+        {
+            "0": "Haley Kennedy",
+            "hr": {
+                "position": "Senior Marketing Designer",
+                "salary": "$313,500",
+                "start_date": "2012\/12\/18"
+            },
+            "contact": {
+                "office": "London",
+                "extn": "3597"
+            }
+        },
+        {
+            "0": "Tatyana Fitzpatrick",
+            "hr": {
+                "position": "Regional Director",
+                "salary": "$385,750",
+                "start_date": "2010\/03\/17"
+            },
+            "contact": {
+                "office": "London",
+                "extn": "1965"
+            }
+        },
+        {
+            "0": "Michael Silva",
+            "hr": {
+                "position": "Marketing Designer",
+                "salary": "$198,500",
+                "start_date": "2012\/11\/27"
+            },
+            "contact": {
+                "office": "London",
+                "extn": "1581"
+            }
+        },
+        {
+            "0": "Paul Byrd",
+            "hr": {
+                "position": "Chief Financial Officer (CFO)",
+                "salary": "$725,000",
+                "start_date": "2010\/06\/09"
+            },
+            "contact": {
+                "office": "New York",
+                "extn": "3059"
+            }
+        },
+        {
+            "0": "Gloria Little",
+            "hr": {
+                "position": "Systems Administrator",
+                "salary": "$237,500",
+                "start_date": "2009\/04\/10"
+            },
+            "contact": {
+                "office": "New York",
+                "extn": "1721"
+            }
+        },
+        {
+            "0": "Bradley Greer",
+            "hr": {
+                "position": "Software Engineer",
+                "salary": "$132,000",
+                "start_date": "2012\/10\/13"
+            },
+            "contact": {
+                "office": "London",
+                "extn": "2558"
+            }
+        },
+        {
+            "0": "Dai Rios",
+            "hr": {
+                "position": "Personnel Lead",
+                "salary": "$217,500",
+                "start_date": "2012\/09\/26"
+            },
+            "contact": {
+                "office": "Edinburgh",
+                "extn": "2290"
+            }
+        },
+        {
+            "0": "Jenette Caldwell",
+            "hr": {
+                "position": "Development Lead",
+                "salary": "$345,000",
+                "start_date": "2011\/09\/03"
+            },
+            "contact": {
+                "office": "New York",
+                "extn": "1937"
+            }
+        },
+        {
+            "0": "Yuri Berry",
+            "hr": {
+                "position": "Chief Marketing Officer (CMO)",
+                "salary": "$675,000",
+                "start_date": "2009\/06\/25"
+            },
+            "contact": {
+                "office": "New York",
+                "extn": "6154"
+            }
+        },
+        {
+            "0": "Caesar Vance",
+            "hr": {
+                "position": "Pre-Sales Support",
+                "salary": "$106,450",
+                "start_date": "2011\/12\/12"
+            },
+            "contact": {
+                "office": "New York",
+                "extn": "8330"
+            }
+        },
+        {
+            "0": "Doris Wilder",
+            "hr": {
+                "position": "Sales Assistant",
+                "salary": "$85,600",
+                "start_date": "2010\/09\/20"
+            },
+            "contact": {
+                "office": "Sidney",
+                "extn": "3023"
+            }
+        },
+        {
+            "0": "Angelica Ramos",
+            "hr": {
+                "position": "Chief Executive Officer (CEO)",
+                "salary": "$1,200,000",
+                "start_date": "2009\/10\/09"
+            },
+            "contact": {
+                "office": "London",
+                "extn": "5797"
+            }
+        },
+        {
+            "0": "Gavin Joyce",
+            "hr": {
+                "position": "Developer",
+                "salary": "$92,575",
+                "start_date": "2010\/12\/22"
+            },
+            "contact": {
+                "office": "Edinburgh",
+                "extn": "8822"
+            }
+        },
+        {
+            "0": "Jennifer Chang",
+            "hr": {
+                "position": "Regional Director",
+                "salary": "$357,650",
+                "start_date": "2010\/11\/14"
+            },
+            "contact": {
+                "office": "Singapore",
+                "extn": "9239"
+            }
+        },
+        {
+            "0": "Brenden Wagner",
+            "hr": {
+                "position": "Software Engineer",
+                "salary": "$206,850",
+                "start_date": "2011\/06\/07"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "1314"
+            }
+        },
+        {
+            "0": "Fiona Green",
+            "hr": {
+                "position": "Chief Operating Officer (COO)",
+                "salary": "$850,000",
+                "start_date": "2010\/03\/11"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "2947"
+            }
+        },
+        {
+            "0": "Shou Itou",
+            "hr": {
+                "position": "Regional Marketing",
+                "salary": "$163,000",
+                "start_date": "2011\/08\/14"
+            },
+            "contact": {
+                "office": "Tokyo",
+                "extn": "8899"
+            }
+        },
+        {
+            "0": "Michelle House",
+            "hr": {
+                "position": "Integration Specialist",
+                "salary": "$95,400",
+                "start_date": "2011\/06\/02"
+            },
+            "contact": {
+                "office": "Sidney",
+                "extn": "2769"
+            }
+        },
+        {
+            "0": "Suki Burks",
+            "hr": {
+                "position": "Developer",
+                "salary": "$114,500",
+                "start_date": "2009\/10\/22"
+            },
+            "contact": {
+                "office": "London",
+                "extn": "6832"
+            }
+        },
+        {
+            "0": "Prescott Bartlett",
+            "hr": {
+                "position": "Technical Author",
+                "salary": "$145,000",
+                "start_date": "2011\/05\/07"
+            },
+            "contact": {
+                "office": "London",
+                "extn": "3606"
+            }
+        },
+        {
+            "0": "Gavin Cortez",
+            "hr": {
+                "position": "Team Leader",
+                "salary": "$235,500",
+                "start_date": "2008\/10\/26"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "2860"
+            }
+        },
+        {
+            "0": "Martena Mccray",
+            "hr": {
+                "position": "Post-Sales support",
+                "salary": "$324,050",
+                "start_date": "2011\/03\/09"
+            },
+            "contact": {
+                "office": "Edinburgh",
+                "extn": "8240"
+            }
+        },
+        {
+            "0": "Unity Butler",
+            "hr": {
+                "position": "Marketing Designer",
+                "salary": "$85,675",
+                "start_date": "2009\/12\/09"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "5384"
+            }
+        },
+        {
+            "0": "Howard Hatfield",
+            "hr": {
+                "position": "Office Manager",
+                "salary": "$164,500",
+                "start_date": "2008\/12\/16"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "7031"
+            }
+        },
+        {
+            "0": "Hope Fuentes",
+            "hr": {
+                "position": "Secretary",
+                "salary": "$109,850",
+                "start_date": "2010\/02\/12"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "6318"
+            }
+        },
+        {
+            "0": "Vivian Harrell",
+            "hr": {
+                "position": "Financial Controller",
+                "salary": "$452,500",
+                "start_date": "2009\/02\/14"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "9422"
+            }
+        },
+        {
+            "0": "Timothy Mooney",
+            "hr": {
+                "position": "Office Manager",
+                "salary": "$136,200",
+                "start_date": "2008\/12\/11"
+            },
+            "contact": {
+                "office": "London",
+                "extn": "7580"
+            }
+        },
+        {
+            "0": "Jackson Bradshaw",
+            "hr": {
+                "position": "Director",
+                "salary": "$645,750",
+                "start_date": "2008\/09\/26"
+            },
+            "contact": {
+                "office": "New York",
+                "extn": "1042"
+            }
+        },
+        {
+            "0": "Olivia Liang",
+            "hr": {
+                "position": "Support Engineer",
+                "salary": "$234,500",
+                "start_date": "2011\/02\/03"
+            },
+            "contact": {
+                "office": "Singapore",
+                "extn": "2120"
+            }
+        },
+        {
+            "0": "Bruno Nash",
+            "hr": {
+                "position": "Software Engineer",
+                "salary": "$163,500",
+                "start_date": "2011\/05\/03"
+            },
+            "contact": {
+                "office": "London",
+                "extn": "6222"
+            }
+        },
+        {
+            "0": "Sakura Yamamoto",
+            "hr": {
+                "position": "Support Engineer",
+                "salary": "$139,575",
+                "start_date": "2009\/08\/19"
+            },
+            "contact": {
+                "office": "Tokyo",
+                "extn": "9383"
+            }
+        },
+        {
+            "0": "Thor Walton",
+            "hr": {
+                "position": "Developer",
+                "salary": "$98,540",
+                "start_date": "2013\/08\/11"
+            },
+            "contact": {
+                "office": "New York",
+                "extn": "8327"
+            }
+        },
+        {
+            "0": "Finn Camacho",
+            "hr": {
+                "position": "Support Engineer",
+                "salary": "$87,500",
+                "start_date": "2009\/07\/07"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "2927"
+            }
+        },
+        {
+            "0": "Serge Baldwin",
+            "hr": {
+                "position": "Data Coordinator",
+                "salary": "$138,575",
+                "start_date": "2012\/04\/09"
+            },
+            "contact": {
+                "office": "Singapore",
+                "extn": "8352"
+            }
+        },
+        {
+            "0": "Zenaida Frank",
+            "hr": {
+                "position": "Software Engineer",
+                "salary": "$125,250",
+                "start_date": "2010\/01\/04"
+            },
+            "contact": {
+                "office": "New York",
+                "extn": "7439"
+            }
+        },
+        {
+            "0": "Zorita Serrano",
+            "hr": {
+                "position": "Software Engineer",
+                "salary": "$115,000",
+                "start_date": "2012\/06\/01"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "4389"
+            }
+        },
+        {
+            "0": "Jennifer Acosta",
+            "hr": {
+                "position": "Junior Javascript Developer",
+                "salary": "$75,650",
+                "start_date": "2013\/02\/01"
+            },
+            "contact": {
+                "office": "Edinburgh",
+                "extn": "3431"
+            }
+        },
+        {
+            "0": "Cara Stevens",
+            "hr": {
+                "position": "Sales Assistant",
+                "salary": "$145,600",
+                "start_date": "2011\/12\/06"
+            },
+            "contact": {
+                "office": "New York",
+                "extn": "3990"
+            }
+        },
+        {
+            "0": "Hermione Butler",
+            "hr": {
+                "position": "Regional Director",
+                "salary": "$356,250",
+                "start_date": "2011\/03\/21"
+            },
+            "contact": {
+                "office": "London",
+                "extn": "1016"
+            }
+        },
+        {
+            "0": "Lael Greer",
+            "hr": {
+                "position": "Systems Administrator",
+                "salary": "$103,500",
+                "start_date": "2009\/02\/27"
+            },
+            "contact": {
+                "office": "London",
+                "extn": "6733"
+            }
+        },
+        {
+            "0": "Jonas Alexander",
+            "hr": {
+                "position": "Developer",
+                "salary": "$86,500",
+                "start_date": "2010\/07\/14"
+            },
+            "contact": {
+                "office": "San Francisco",
+                "extn": "8196"
+            }
+        },
+        {
+            "0": "Shad Decker",
+            "hr": {
+                "position": "Regional Director",
+                "salary": "$183,000",
+                "start_date": "2008\/11\/13"
+            },
+            "contact": {
+                "office": "Edinburgh",
+                "extn": "6373"
+            }
+        },
+        {
+            "0": "Michael Bruce",
+            "hr": {
+                "position": "Javascript Developer",
+                "salary": "$183,000",
+                "start_date": "2011\/06\/27"
+            },
+            "contact": {
+                "office": "Singapore",
+                "extn": "5384"
+            }
+        },
+        {
+            "0": "Donna Snider",
+            "hr": {
+                "position": "Customer Support",
+                "salary": "$112,000",
+                "start_date": "2011\/01\/25"
+            },
+            "contact": {
+                "office": "New York",
+                "extn": "4226"
+            }
+        }
+    ]
+}

examples/ajax/data/objects.txt

@@ -0,0 +1,517 @@
+{
+    "data": [
+        {
+            "id": "1",
+            "name": "Tiger Nixon",
+            "position": "System Architect",
+            "salary": "$320,800",
+            "start_date": "2011\/04\/25",
+            "office": "Edinburgh",
+            "extn": "5421"
+        },
+        {
+            "id": "2",
+            "name": "Garrett Winters",
+            "position": "Accountant",
+            "salary": "$170,750",
+            "start_date": "2011\/07\/25",
+            "office": "Tokyo",
+            "extn": "8422"
+        },
+        {
+            "id": "3",
+            "name": "Ashton Cox",
+            "position": "Junior Technical Author",
+            "salary": "$86,000",
+            "start_date": "2009\/01\/12",
+            "office": "San Francisco",
+            "extn": "1562"
+        },
+        {
+            "id": "4",
+            "name": "Cedric Kelly",
+            "position": "Senior Javascript Developer",
+            "salary": "$433,060",
+            "start_date": "2012\/03\/29",
+            "office": "Edinburgh",
+            "extn": "6224"
+        },
+        {
+            "id": "5",
+            "name": "Airi Satou",
+            "position": "Accountant",
+            "salary": "$162,700",
+            "start_date": "2008\/11\/28",
+            "office": "Tokyo",
+            "extn": "5407"
+        },
+        {
+            "id": "6",
+            "name": "Brielle Williamson",
+            "position": "Integration Specialist",
+            "salary": "$372,000",
+            "start_date": "2012\/12\/02",
+            "office": "New York",
+            "extn": "4804"
+        },
+        {
+            "id": "7",
+            "name": "Herrod Chandler",
+            "position": "Sales Assistant",
+            "salary": "$137,500",
+            "start_date": "2012\/08\/06",
+            "office": "San Francisco",
+            "extn": "9608"
+        },
+        {
+            "id": "8",
+            "name": "Rhona Davidson",
+            "position": "Integration Specialist",
+            "salary": "$327,900",
+            "start_date": "2010\/10\/14",
+            "office": "Tokyo",
+            "extn": "6200"
+        },
+        {
+            "id": "9",
+            "name": "Colleen Hurst",
+            "position": "Javascript Developer",
+            "salary": "$205,500",
+            "start_date": "2009\/09\/15",
+            "office": "San Francisco",
+            "extn": "2360"
+        },
+        {
+            "id": "10",
+            "name": "Sonya Frost",
+            "position": "Software Engineer",
+            "salary": "$103,600",
+            "start_date": "2008\/12\/13",
+            "office": "Edinburgh",
+            "extn": "1667"
+        },
+        {
+            "id": "11",
+            "name": "Jena Gaines",
+            "position": "Office Manager",
+            "salary": "$90,560",
+            "start_date": "2008\/12\/19",
+            "office": "London",
+            "extn": "3814"
+        },
+        {
+            "id": "12",
+            "name": "Quinn Flynn",
+            "position": "Support Lead",
+            "salary": "$342,000",
+            "start_date": "2013\/03\/03",
+            "office": "Edinburgh",
+            "extn": "9497"
+        },
+        {
+            "id": "13",
+            "name": "Charde Marshall",
+            "position": "Regional Director",
+            "salary": "$470,600",
+            "start_date": "2008\/10\/16",
+            "office": "San Francisco",
+            "extn": "6741"
+        },
+        {
+            "id": "14",
+            "name": "Haley Kennedy",
+            "position": "Senior Marketing Designer",
+            "salary": "$313,500",
+            "start_date": "2012\/12\/18",
+            "office": "London",
+            "extn": "3597"
+        },
+        {
+            "id": "15",
+            "name": "Tatyana Fitzpatrick",
+            "position": "Regional Director",
+            "salary": "$385,750",
+            "start_date": "2010\/03\/17",
+            "office": "London",
+            "extn": "1965"
+        },
+        {
+            "id": "16",
+            "name": "Michael Silva",
+            "position": "Marketing Designer",
+            "salary": "$198,500",
+            "start_date": "2012\/11\/27",
+            "office": "London",
+            "extn": "1581"
+        },
+        {
+            "id": "17",
+            "name": "Paul Byrd",
+            "position": "Chief Financial Officer (CFO)",
+            "salary": "$725,000",
+            "start_date": "2010\/06\/09",
+            "office": "New York",
+            "extn": "3059"
+        },
+        {
+            "id": "18",
+            "name": "Gloria Little",
+            "position": "Systems Administrator",
+            "salary": "$237,500",
+            "start_date": "2009\/04\/10",
+            "office": "New York",
+            "extn": "1721"
+        },
+        {
+            "id": "19",
+            "name": "Bradley Greer",
+            "position": "Software Engineer",
+            "salary": "$132,000",
+            "start_date": "2012\/10\/13",
+            "office": "London",
+            "extn": "2558"
+        },
+        {
+            "id": "20",
+            "name": "Dai Rios",
+            "position": "Personnel Lead",
+            "salary": "$217,500",
+            "start_date": "2012\/09\/26",
+            "office": "Edinburgh",
+            "extn": "2290"
+        },
+        {
+            "id": "21",
+            "name": "Jenette Caldwell",
+            "position": "Development Lead",
+            "salary": "$345,000",
+            "start_date": "2011\/09\/03",
+            "office": "New York",
+            "extn": "1937"
+        },
+        {
+            "id": "22",
+            "name": "Yuri Berry",
+            "position": "Chief Marketing Officer (CMO)",
+            "salary": "$675,000",
+            "start_date": "2009\/06\/25",
+            "office": "New York",
+            "extn": "6154"
+        },
+        {
+            "id": "23",
+            "name": "Caesar Vance",
+            "position": "Pre-Sales Support",
+            "salary": "$106,450",
+            "start_date": "2011\/12\/12",
+            "office": "New York",
+            "extn": "8330"
+        },
+        {
+            "id": "24",
+            "name": "Doris Wilder",
+            "position": "Sales Assistant",
+            "salary": "$85,600",
+            "start_date": "2010\/09\/20",
+            "office": "Sidney",
+            "extn": "3023"
+        },
+        {
+            "id": "25",
+            "name": "Angelica Ramos",
+            "position": "Chief Executive Officer (CEO)",
+            "salary": "$1,200,000",
+            "start_date": "2009\/10\/09",
+            "office": "London",
+            "extn": "5797"
+        },
+        {
+            "id": "26",
+            "name": "Gavin Joyce",
+            "position": "Developer",
+            "salary": "$92,575",
+            "start_date": "2010\/12\/22",
+            "office": "Edinburgh",
+            "extn": "8822"
+        },
+        {
+            "id": "27",
+            "name": "Jennifer Chang",
+            "position": "Regional Director",
+            "salary": "$357,650",
+            "start_date": "2010\/11\/14",
+            "office": "Singapore",
+            "extn": "9239"
+        },
+        {
+            "id": "28",
+            "name": "Brenden Wagner",
+            "position": "Software Engineer",
+            "salary": "$206,850",
+            "start_date": "2011\/06\/07",
+            "office": "San Francisco",
+            "extn": "1314"
+        },
+        {
+            "id": "29",
+            "name": "Fiona Green",
+            "position": "Chief Operating Officer (COO)",
+            "salary": "$850,000",
+            "start_date": "2010\/03\/11",
+            "office": "San Francisco",
+            "extn": "2947"
+        },
+        {
+            "id": "30",
+            "name": "Shou Itou",
+            "position": "Regional Marketing",
+            "salary": "$163,000",
+            "start_date": "2011\/08\/14",
+            "office": "Tokyo",
+            "extn": "8899"
+        },
+        {
+            "id": "31",
+            "name": "Michelle House",
+            "position": "Integration Specialist",
+            "salary": "$95,400",
+            "start_date": "2011\/06\/02",
+            "office": "Sidney",
+            "extn": "2769"
+        },
+        {
+            "id": "32",
+            "name": "Suki Burks",
+            "position": "Developer",
+            "salary": "$114,500",
+            "start_date": "2009\/10\/22",
+            "office": "London",
+            "extn": "6832"
+        },
+        {
+            "id": "33",
+            "name": "Prescott Bartlett",
+            "position": "Technical Author",
+            "salary": "$145,000",
+            "start_date": "2011\/05\/07",
+            "office": "London",
+            "extn": "3606"
+        },
+        {
+            "id": "34",
+            "name": "Gavin Cortez",
+            "position": "Team Leader",
+            "salary": "$235,500",
+            "start_date": "2008\/10\/26",
+            "office": "San Francisco",
+            "extn": "2860"
+        },
+        {
+            "id": "35",
+            "name": "Martena Mccray",
+            "position": "Post-Sales support",
+            "salary": "$324,050",
+            "start_date": "2011\/03\/09",
+            "office": "Edinburgh",
+            "extn": "8240"
+        },
+        {
+            "id": "36",
+            "name": "Unity Butler",
+            "position": "Marketing Designer",
+            "salary": "$85,675",
+            "start_date": "2009\/12\/09",
+            "office": "San Francisco",
+            "extn": "5384"
+        },
+        {
+            "id": "37",
+            "name": "Howard Hatfield",
+            "position": "Office Manager",
+            "salary": "$164,500",
+            "start_date": "2008\/12\/16",
+            "office": "San Francisco",
+            "extn": "7031"
+        },
+        {
+            "id": "38",
+            "name": "Hope Fuentes",
+            "position": "Secretary",
+            "salary": "$109,850",
+            "start_date": "2010\/02\/12",
+            "office": "San Francisco",
+            "extn": "6318"
+        },
+        {
+            "id": "39",
+            "name": "Vivian Harrell",
+            "position": "Financial Controller",
+            "salary": "$452,500",
+            "start_date": "2009\/02\/14",
+            "office": "San Francisco",
+            "extn": "9422"
+        },
+        {
+            "id": "40",
+            "name": "Timothy Mooney",
+            "position": "Office Manager",
+            "salary": "$136,200",
+            "start_date": "2008\/12\/11",
+            "office": "London",
+            "extn": "7580"
+        },
+        {
+            "id": "41",
+            "name": "Jackson Bradshaw",
+            "position": "Director",
+            "salary": "$645,750",
+            "start_date": "2008\/09\/26",
+            "office": "New York",
+            "extn": "1042"
+        },
+        {
+            "id": "42",
+            "name": "Olivia Liang",
+            "position": "Support Engineer",
+            "salary": "$234,500",
+            "start_date": "2011\/02\/03",
+            "office": "Singapore",
+            "extn": "2120"
+        },
+        {
+            "id": "43",
+            "name": "Bruno Nash",
+            "position": "Software Engineer",
+            "salary": "$163,500",
+            "start_date": "2011\/05\/03",
+            "office": "London",
+            "extn": "6222"
+        },
+        {
+            "id": "44",
+            "name": "Sakura Yamamoto",
+            "position": "Support Engineer",
+            "salary": "$139,575",
+            "start_date": "2009\/08\/19",
+            "office": "Tokyo",
+            "extn": "9383"
+        },
+        {
+            "id": "45",
+            "name": "Thor Walton",
+            "position": "Developer",
+            "salary": "$98,540",
+            "start_date": "2013\/08\/11",
+            "office": "New York",
+            "extn": "8327"
+        },
+        {
+            "id": "46",
+            "name": "Finn Camacho",
+            "position": "Support Engineer",
+            "salary": "$87,500",
+            "start_date": "2009\/07\/07",
+            "office": "San Francisco",
+            "extn": "2927"
+        },
+        {
+            "id": "47",
+            "name": "Serge Baldwin",
+            "position": "Data Coordinator",
+            "salary": "$138,575",
+            "start_date": "2012\/04\/09",
+            "office": "Singapore",
+            "extn": "8352"
+        },
+        {
+            "id": "48",
+            "name": "Zenaida Frank",
+            "position": "Software Engineer",
+            "salary": "$125,250",
+            "start_date": "2010\/01\/04",
+            "office": "New York",
+            "extn": "7439"
+        },
+        {
+            "id": "49",
+            "name": "Zorita Serrano",
+            "position": "Software Engineer",
+            "salary": "$115,000",
+            "start_date": "2012\/06\/01",
+            "office": "San Francisco",
+            "extn": "4389"
+        },
+        {
+            "id": "50",
+            "name": "Jennifer Acosta",
+            "position": "Junior Javascript Developer",
+            "salary": "$75,650",
+            "start_date": "2013\/02\/01",
+            "office": "Edinburgh",
+            "extn": "3431"
+        },
+        {
+            "id": "51",
+            "name": "Cara Stevens",
+            "position": "Sales Assistant",
+            "salary": "$145,600",
+            "start_date": "2011\/12\/06",
+            "office": "New York",
+            "extn": "3990"
+        },
+        {
+            "id": "52",
+            "name": "Hermione Butler",
+            "position": "Regional Director",
+            "salary": "$356,250",
+            "start_date": "2011\/03\/21",
+            "office": "London",
+            "extn": "1016"
+        },
+        {
+            "id": "53",
+            "name": "Lael Greer",
+            "position": "Systems Administrator",
+            "salary": "$103,500",
+            "start_date": "2009\/02\/27",
+            "office": "London",
+            "extn": "6733"
+        },
+        {
+            "id": "54",
+            "name": "Jonas Alexander",
+            "position": "Developer",
+            "salary": "$86,500",
+            "start_date": "2010\/07\/14",
+            "office": "San Francisco",
+            "extn": "8196"
+        },
+        {
+            "id": "55",
+            "name": "Shad Decker",
+            "position": "Regional Director",
+            "salary": "$183,000",
+            "start_date": "2008\/11\/13",
+            "office": "Edinburgh",
+            "extn": "6373"
+        },
+        {
+            "id": "56",
+            "name": "Michael Bruce",
+            "position": "Javascript Developer",
+            "salary": "$183,000",
+            "start_date": "2011\/06\/27",
+            "office": "Singapore",
+            "extn": "5384"
+        },
+        {
+            "id": "57",
+            "name": "Donna Snider",
+            "position": "Customer Support",
+            "salary": "$112,000",
+            "start_date": "2011\/01\/25",
+            "office": "New York",
+            "extn": "4226"
+        }
+    ]
+}

examples/ajax/data/objects_deep.txt

@@ -0,0 +1,688 @@
+{
+    "data": [
+        {
+            "name": "Tiger Nixon",
+            "hr": {
+                "position": "System Architect",
+                "salary": "$320,800",
+                "start_date": "2011\/04\/25"
+            },
+            "contact": [
+                "Edinburgh",
+                "5421"
+            ]
+        },
+        {
+            "name": "Garrett Winters",
+            "hr": {
+                "position": "Accountant",
+                "salary": "$170,750",
+                "start_date": "2011\/07\/25"
+            },
+            "contact": [
+                "Tokyo",
+                "8422"
+            ]
+        },
+        {
+            "name": "Ashton Cox",
+            "hr": {
+                "position": "Junior Technical Author",
+                "salary": "$86,000",
+                "start_date": "2009\/01\/12"
+            },
+            "contact": [
+                "San Francisco",
+                "1562"
+            ]
+        },
+        {
+            "name": "Cedric Kelly",
+            "hr": {
+                "position": "Senior Javascript Developer",
+                "salary": "$433,060",
+                "start_date": "2012\/03\/29"
+            },
+            "contact": [
+                "Edinburgh",
+                "6224"
+            ]
+        },
+        {
+            "name": "Airi Satou",
+            "hr": {
+                "position": "Accountant",
+                "salary": "$162,700",
+                "start_date": "2008\/11\/28"
+            },
+            "contact": [
+                "Tokyo",
+                "5407"
+            ]
+        },
+        {
+            "name": "Brielle Williamson",
+            "hr": {
+                "position": "Integration Specialist",
+                "salary": "$372,000",
+                "start_date": "2012\/12\/02"
+            },
+            "contact": [
+                "New York",
+                "4804"
+            ]
+        },
+        {
+            "name": "Herrod Chandler",
+            "hr": {
+                "position": "Sales Assistant",
+                "salary": "$137,500",
+                "start_date": "2012\/08\/06"
+            },
+            "contact": [
+                "San Francisco",
+                "9608"
+            ]
+        },
+        {
+            "name": "Rhona Davidson",
+            "hr": {
+                "position": "Integration Specialist",
+                "salary": "$327,900",
+                "start_date": "2010\/10\/14"
+            },
+            "contact": [
+                "Tokyo",
+                "6200"
+            ]
+        },
+        {
+            "name": "Colleen Hurst",
+            "hr": {
+                "position": "Javascript Developer",
+                "salary": "$205,500",
+                "start_date": "2009\/09\/15"
+            },
+            "contact": [
+                "San Francisco",
+                "2360"
+            ]
+        },
+        {
+            "name": "Sonya Frost",
+            "hr": {
+                "position": "Software Engineer",
+                "salary": "$103,600",
+                "start_date": "2008\/12\/13"
+            },
+            "contact": [
+                "Edinburgh",
+                "1667"
+            ]
+        },
+        {
+            "name": "Jena Gaines",
+            "hr": {
+                "position": "Office Manager",
+                "salary": "$90,560",
+                "start_date": "2008\/12\/19"
+            },
+            "contact": [
+                "London",
+                "3814"
+            ]
+        },
+        {
+            "name": "Quinn Flynn",
+            "hr": {
+                "position": "Support Lead",
+                "salary": "$342,000",
+                "start_date": "2013\/03\/03"
+            },
+            "contact": [
+                "Edinburgh",
+                "9497"
+            ]
+        },
+        {
+            "name": "Charde Marshall",
+            "hr": {
+                "position": "Regional Director",
+                "salary": "$470,600",
+                "start_date": "2008\/10\/16"
+            },
+            "contact": [
+                "San Francisco",
+                "6741"
+            ]
+        },
+        {
+            "name": "Haley Kennedy",
+            "hr": {
+                "position": "Senior Marketing Designer",
+                "salary": "$313,500",
+                "start_date": "2012\/12\/18"
+            },
+            "contact": [
+                "London",
+                "3597"
+            ]
+        },
+        {
+            "name": "Tatyana Fitzpatrick",
+            "hr": {
+                "position": "Regional Director",
+                "salary": "$385,750",
+                "start_date": "2010\/03\/17"
+            },
+            "contact": [
+                "London",
+                "1965"
+            ]
+        },
+        {
+            "name": "Michael Silva",
+            "hr": {
+                "position": "Marketing Designer",
+                "salary": "$198,500",
+                "start_date": "2012\/11\/27"
+            },
+            "contact": [
+                "London",
+                "1581"
+            ]
+        },
+        {
+            "name": "Paul Byrd",
+            "hr": {
+                "position": "Chief Financial Officer (CFO)",
+                "salary": "$725,000",
+                "start_date": "2010\/06\/09"
+            },
+            "contact": [
+                "New York",
+                "3059"
+            ]
+        },
+        {
+            "name": "Gloria Little",
+            "hr": {
+                "position": "Systems Administrator",
+                "salary": "$237,500",
+                "start_date": "2009\/04\/10"
+            },
+            "contact": [
+                "New York",
+                "1721"
+            ]
+        },
+        {
+            "name": "Bradley Greer",
+            "hr": {
+                "position": "Software Engineer",
+                "salary": "$132,000",
+                "start_date": "2012\/10\/13"
+            },
+            "contact": [
+                "London",
+                "2558"
+            ]
+        },
+        {
+            "name": "Dai Rios",
+            "hr": {
+                "position": "Personnel Lead",
+                "salary": "$217,500",
+                "start_date": "2012\/09\/26"
+            },
+            "contact": [
+                "Edinburgh",
+                "2290"
+            ]
+        },
+        {
+            "name": "Jenette Caldwell",
+            "hr": {
+                "position": "Development Lead",
+                "salary": "$345,000",
+                "start_date": "2011\/09\/03"
+            },
+            "contact": [
+                "New York",
+                "1937"
+            ]
+        },
+        {
+            "name": "Yuri Berry",
+            "hr": {
+                "position": "Chief Marketing Officer (CMO)",
+                "salary": "$675,000",
+                "start_date": "2009\/06\/25"
+            },
+            "contact": [
+                "New York",
+                "6154"
+            ]
+        },
+        {
+            "name": "Caesar Vance",
+            "hr": {
+                "position": "Pre-Sales Support",
+                "salary": "$106,450",
+                "start_date": "2011\/12\/12"
+            },
+            "contact": [
+                "New York",
+                "8330"
+            ]
+        },
+        {
+            "name": "Doris Wilder",
+            "hr": {
+                "position": "Sales Assistant",
+                "salary": "$85,600",
+                "start_date": "2010\/09\/20"
+            },
+            "contact": [
+                "Sidney",
+                "3023"
+            ]
+        },
+        {
+            "name": "Angelica Ramos",
+            "hr": {
+                "position": "Chief Executive Officer (CEO)",
+                "salary": "$1,200,000",
+                "start_date": "2009\/10\/09"
+            },
+            "contact": [
+                "London",
+                "5797"
+            ]
+        },
+        {
+            "name": "Gavin Joyce",
+            "hr": {
+                "position": "Developer",
+                "salary": "$92,575",
+                "start_date": "2010\/12\/22"
+            },
+            "contact": [
+                "Edinburgh",
+                "8822"
+            ]
+        },
+        {
+            "name": "Jennifer Chang",
+            "hr": {
+                "position": "Regional Director",
+                "salary": "$357,650",
+                "start_date": "2010\/11\/14"
+            },
+            "contact": [
+                "Singapore",
+                "9239"
+            ]
+        },
+        {
+            "name": "Brenden Wagner",
+            "hr": {
+                "position": "Software Engineer",
+                "salary": "$206,850",
+                "start_date": "2011\/06\/07"
+            },
+            "contact": [
+                "San Francisco",
+                "1314"
+            ]
+        },
+        {
+            "name": "Fiona Green",
+            "hr": {
+                "position": "Chief Operating Officer (COO)",
+                "salary": "$850,000",
+                "start_date": "2010\/03\/11"
+            },
+            "contact": [
+                "San Francisco",
+                "2947"
+            ]
+        },
+        {
+            "name": "Shou Itou",
+            "hr": {
+                "position": "Regional Marketing",
+                "salary": "$163,000",
+                "start_date": "2011\/08\/14"
+            },
+            "contact": [
+                "Tokyo",
+                "8899"
+            ]
+        },
+        {
+            "name": "Michelle House",
+            "hr": {
+                "position": "Integration Specialist",
+                "salary": "$95,400",
+                "start_date": "2011\/06\/02"
+            },
+            "contact": [
+                "Sidney",
+                "2769"
+            ]
+        },
+        {
+            "name": "Suki Burks",
+            "hr": {
+                "position": "Developer",
+                "salary": "$114,500",
+                "start_date": "2009\/10\/22"
+            },
+            "contact": [
+                "London",
+                "6832"
+            ]
+        },
+        {
+            "name": "Prescott Bartlett",
+            "hr": {
+                "position": "Technical Author",
+                "salary": "$145,000",
+                "start_date": "2011\/05\/07"
+            },
+            "contact": [
+                "London",
+                "3606"
+            ]
+        },
+        {
+            "name": "Gavin Cortez",
+            "hr": {
+                "position": "Team Leader",
+                "salary": "$235,500",
+                "start_date": "2008\/10\/26"
+            },
+            "contact": [
+                "San Francisco",
+                "2860"
+            ]
+        },
+        {
+            "name": "Martena Mccray",
+            "hr": {
+                "position": "Post-Sales support",
+                "salary": "$324,050",
+                "start_date": "2011\/03\/09"
+            },
+            "contact": [
+                "Edinburgh",
+                "8240"
+            ]
+        },
+        {
+            "name": "Unity Butler",
+            "hr": {
+                "position": "Marketing Designer",
+                "salary": "$85,675",
+                "start_date": "2009\/12\/09"
+            },
+            "contact": [
+                "San Francisco",
+                "5384"
+            ]
+        },
+        {
+            "name": "Howard Hatfield",
+            "hr": {
+                "position": "Office Manager",
+                "salary": "$164,500",
+                "start_date": "2008\/12\/16"
+            },
+            "contact": [
+                "San Francisco",
+                "7031"
+            ]
+        },
+        {
+            "name": "Hope Fuentes",
+            "hr": {
+                "position": "Secretary",
+                "salary": "$109,850",
+                "start_date": "2010\/02\/12"
+            },
+            "contact": [
+                "San Francisco",
+                "6318"
+            ]
+        },
+        {
+            "name": "Vivian Harrell",
+            "hr": {
+                "position": "Financial Controller",
+                "salary": "$452,500",
+                "start_date": "2009\/02\/14"
+            },
+            "contact": [
+                "San Francisco",
+                "9422"
+            ]
+        },
+        {
+            "name": "Timothy Mooney",
+            "hr": {
+                "position": "Office Manager",
+                "salary": "$136,200",
+                "start_date": "2008\/12\/11"
+            },
+            "contact": [
+                "London",
+                "7580"
+            ]
+        },
+        {
+            "name": "Jackson Bradshaw",
+            "hr": {
+                "position": "Director",
+                "salary": "$645,750",
+                "start_date": "2008\/09\/26"
+            },
+            "contact": [
+                "New York",
+                "1042"
+            ]
+        },
+        {
+            "name": "Olivia Liang",
+            "hr": {
+                "position": "Support Engineer",
+                "salary": "$234,500",
+                "start_date": "2011\/02\/03"
+            },
+            "contact": [
+                "Singapore",
+                "2120"
+            ]
+        },
+        {
+            "name": "Bruno Nash",
+            "hr": {
+                "position": "Software Engineer",
+                "salary": "$163,500",
+                "start_date": "2011\/05\/03"
+            },
+            "contact": [
+                "London",
+                "6222"
+            ]
+        },
+        {
+            "name": "Sakura Yamamoto",
+            "hr": {
+                "position": "Support Engineer",
+                "salary": "$139,575",
+                "start_date": "2009\/08\/19"
+            },
+            "contact": [
+                "Tokyo",
+                "9383"
+            ]
+        },
+        {
+            "name": "Thor Walton",
+            "hr": {
+                "position": "Developer",
+                "salary": "$98,540",
+                "start_date": "2013\/08\/11"
+            },
+            "contact": [
+                "New York",
+                "8327"
+            ]
+        },
+        {
+            "name": "Finn Camacho",
+            "hr": {
+                "position": "Support Engineer",
+                "salary": "$87,500",
+                "start_date": "2009\/07\/07"
+            },
+            "contact": [
+                "San Francisco",
+                "2927"
+            ]
+        },
+        {
+            "name": "Serge Baldwin",
+            "hr": {
+                "position": "Data Coordinator",
+                "salary": "$138,575",
+                "start_date": "2012\/04\/09"
+            },
+            "contact": [
+                "Singapore",
+                "8352"
+            ]
+        },
+        {
+            "name": "Zenaida Frank",
+            "hr": {
+                "position": "Software Engineer",
+                "salary": "$125,250",
+                "start_date": "2010\/01\/04"
+            },
+            "contact": [
+                "New York",
+                "7439"
+            ]
+        },
+        {
+            "name": "Zorita Serrano",
+            "hr": {
+                "position": "Software Engineer",
+                "salary": "$115,000",
+                "start_date": "2012\/06\/01"
+            },
+            "contact": [
+                "San Francisco",
+                "4389"
+            ]
+        },
+        {
+            "name": "Jennifer Acosta",
+            "hr": {
+                "position": "Junior Javascript Developer",
+                "salary": "$75,650",
+                "start_date": "2013\/02\/01"
+            },
+            "contact": [
+                "Edinburgh",
+                "3431"
+            ]
+        },
+        {
+            "name": "Cara Stevens",
+            "hr": {
+                "position": "Sales Assistant",
+                "salary": "$145,600",
+                "start_date": "2011\/12\/06"
+            },
+            "contact": [
+                "New York",
+                "3990"
+            ]
+        },
+        {
+            "name": "Hermione Butler",
+            "hr": {
+                "position": "Regional Director",
+                "salary": "$356,250",
+                "start_date": "2011\/03\/21"
+            },
+            "contact": [
+                "London",
+                "1016"
+            ]
+        },
+        {
+            "name": "Lael Greer",
+            "hr": {
+                "position": "Systems Administrator",
+                "salary": "$103,500",
+                "start_date": "2009\/02\/27"
+            },
+            "contact": [
+                "London",
+                "6733"
+            ]
+        },
+        {
+            "name": "Jonas Alexander",
+            "hr": {
+                "position": "Developer",
+                "salary": "$86,500",
+                "start_date": "2010\/07\/14"
+            },
+            "contact": [
+                "San Francisco",
+                "8196"
+            ]
+        },
+        {
+            "name": "Shad Decker",
+            "hr": {
+                "position": "Regional Director",
+                "salary": "$183,000",
+                "start_date": "2008\/11\/13"
+            },
+            "contact": [
+                "Edinburgh",
+                "6373"
+            ]
+        },
+        {
+            "name": "Michael Bruce",
+            "hr": {
+                "position": "Javascript Developer",
+                "salary": "$183,000",
+                "start_date": "2011\/06\/27"
+            },
+            "contact": [
+                "Singapore",
+                "5384"
+            ]
+        },
+        {
+            "name": "Donna Snider",
+            "hr": {
+                "position": "Customer Support",
+                "salary": "$112,000",
+                "start_date": "2011\/01\/25"
+            },
+            "contact": [
+                "New York",
+                "4226"
+            ]
+        }
+    ]
+}

examples/ajax/data/objects_root_array.txt

@@ -0,0 +1,515 @@
+[
+    {
+        "id": "1",
+        "name": "Tiger Nixon",
+        "position": "System Architect",
+        "salary": "$320,800",
+        "start_date": "2011\/04\/25",
+        "office": "Edinburgh",
+        "extn": "5421"
+    },
+    {
+        "id": "2",
+        "name": "Garrett Winters",
+        "position": "Accountant",
+        "salary": "$170,750",
+        "start_date": "2011\/07\/25",
+        "office": "Tokyo",
+        "extn": "8422"
+    },
+    {
+        "id": "3",
+        "name": "Ashton Cox",
+        "position": "Junior Technical Author",
+        "salary": "$86,000",
+        "start_date": "2009\/01\/12",
+        "office": "San Francisco",
+        "extn": "1562"
+    },
+    {
+        "id": "4",
+        "name": "Cedric Kelly",
+        "position": "Senior Javascript Developer",
+        "salary": "$433,060",
+        "start_date": "2012\/03\/29",
+        "office": "Edinburgh",
+        "extn": "6224"
+    },
+    {
+        "id": "5",
+        "name": "Airi Satou",
+        "position": "Accountant",
+        "salary": "$162,700",
+        "start_date": "2008\/11\/28",
+        "office": "Tokyo",
+        "extn": "5407"
+    },
+    {
+        "id": "6",
+        "name": "Brielle Williamson",
+        "position": "Integration Specialist",
+        "salary": "$372,000",
+        "start_date": "2012\/12\/02",
+        "office": "New York",
+        "extn": "4804"
+    },
+    {
+        "id": "7",
+        "name": "Herrod Chandler",
+        "position": "Sales Assistant",
+        "salary": "$137,500",
+        "start_date": "2012\/08\/06",
+        "office": "San Francisco",
+        "extn": "9608"
+    },
+    {
+        "id": "8",
+        "name": "Rhona Davidson",
+        "position": "Integration Specialist",
+        "salary": "$327,900",
+        "start_date": "2010\/10\/14",
+        "office": "Tokyo",
+        "extn": "6200"
+    },
+    {
+        "id": "9",
+        "name": "Colleen Hurst",
+        "position": "Javascript Developer",
+        "salary": "$205,500",
+        "start_date": "2009\/09\/15",
+        "office": "San Francisco",
+        "extn": "2360"
+    },
+    {
+        "id": "10",
+        "name": "Sonya Frost",
+        "position": "Software Engineer",
+        "salary": "$103,600",
+        "start_date": "2008\/12\/13",
+        "office": "Edinburgh",
+        "extn": "1667"
+    },
+    {
+        "id": "11",
+        "name": "Jena Gaines",
+        "position": "Office Manager",
+        "salary": "$90,560",
+        "start_date": "2008\/12\/19",
+        "office": "London",
+        "extn": "3814"
+    },
+    {
+        "id": "12",
+        "name": "Quinn Flynn",
+        "position": "Support Lead",
+        "salary": "$342,000",
+        "start_date": "2013\/03\/03",
+        "office": "Edinburgh",
+        "extn": "9497"
+    },
+    {
+        "id": "13",
+        "name": "Charde Marshall",
+        "position": "Regional Director",
+        "salary": "$470,600",
+        "start_date": "2008\/10\/16",
+        "office": "San Francisco",
+        "extn": "6741"
+    },
+    {
+        "id": "14",
+        "name": "Haley Kennedy",
+        "position": "Senior Marketing Designer",
+        "salary": "$313,500",
+        "start_date": "2012\/12\/18",
+        "office": "London",
+        "extn": "3597"
+    },
+    {
+        "id": "15",
+        "name": "Tatyana Fitzpatrick",
+        "position": "Regional Director",
+        "salary": "$385,750",
+        "start_date": "2010\/03\/17",
+        "office": "London",
+        "extn": "1965"
+    },
+    {
+        "id": "16",
+        "name": "Michael Silva",
+        "position": "Marketing Designer",
+        "salary": "$198,500",
+        "start_date": "2012\/11\/27",
+        "office": "London",
+        "extn": "1581"
+    },
+    {
+        "id": "17",
+        "name": "Paul Byrd",
+        "position": "Chief Financial Officer (CFO)",
+        "salary": "$725,000",
+        "start_date": "2010\/06\/09",
+        "office": "New York",
+        "extn": "3059"
+    },
+    {
+        "id": "18",
+        "name": "Gloria Little",
+        "position": "Systems Administrator",
+        "salary": "$237,500",
+        "start_date": "2009\/04\/10",
+        "office": "New York",
+        "extn": "1721"
+    },
+    {
+        "id": "19",
+        "name": "Bradley Greer",
+        "position": "Software Engineer",
+        "salary": "$132,000",
+        "start_date": "2012\/10\/13",
+        "office": "London",
+        "extn": "2558"
+    },
+    {
+        "id": "20",
+        "name": "Dai Rios",
+        "position": "Personnel Lead",
+        "salary": "$217,500",
+        "start_date": "2012\/09\/26",
+        "office": "Edinburgh",
+        "extn": "2290"
+    },
+    {
+        "id": "21",
+        "name": "Jenette Caldwell",
+        "position": "Development Lead",
+        "salary": "$345,000",
+        "start_date": "2011\/09\/03",
+        "office": "New York",
+        "extn": "1937"
+    },
+    {
+        "id": "22",
+        "name": "Yuri Berry",
+        "position": "Chief Marketing Officer (CMO)",
+        "salary": "$675,000",
+        "start_date": "2009\/06\/25",
+        "office": "New York",
+        "extn": "6154"
+    },
+    {
+        "id": "23",
+        "name": "Caesar Vance",
+        "position": "Pre-Sales Support",
+        "salary": "$106,450",
+        "start_date": "2011\/12\/12",
+        "office": "New York",
+        "extn": "8330"
+    },
+    {
+        "id": "24",
+        "name": "Doris Wilder",
+        "position": "Sales Assistant",
+        "salary": "$85,600",
+        "start_date": "2010\/09\/20",
+        "office": "Sidney",
+        "extn": "3023"
+    },
+    {
+        "id": "25",
+        "name": "Angelica Ramos",
+        "position": "Chief Executive Officer (CEO)",
+        "salary": "$1,200,000",
+        "start_date": "2009\/10\/09",
+        "office": "London",
+        "extn": "5797"
+    },
+    {
+        "id": "26",
+        "name": "Gavin Joyce",
+        "position": "Developer",
+        "salary": "$92,575",
+        "start_date": "2010\/12\/22",
+        "office": "Edinburgh",
+        "extn": "8822"
+    },
+    {
+        "id": "27",
+        "name": "Jennifer Chang",
+        "position": "Regional Director",
+        "salary": "$357,650",
+        "start_date": "2010\/11\/14",
+        "office": "Singapore",
+        "extn": "9239"
+    },
+    {
+        "id": "28",
+        "name": "Brenden Wagner",
+        "position": "Software Engineer",
+        "salary": "$206,850",
+        "start_date": "2011\/06\/07",
+        "office": "San Francisco",
+        "extn": "1314"
+    },
+    {
+        "id": "29",
+        "name": "Fiona Green",
+        "position": "Chief Operating Officer (COO)",
+        "salary": "$850,000",
+        "start_date": "2010\/03\/11",
+        "office": "San Francisco",
+        "extn": "2947"
+    },
+    {
+        "id": "30",
+        "name": "Shou Itou",
+        "position": "Regional Marketing",
+        "salary": "$163,000",
+        "start_date": "2011\/08\/14",
+        "office": "Tokyo",
+        "extn": "8899"
+    },
+    {
+        "id": "31",
+        "name": "Michelle House",
+        "position": "Integration Specialist",
+        "salary": "$95,400",
+        "start_date": "2011\/06\/02",
+        "office": "Sidney",
+        "extn": "2769"
+    },
+    {
+        "id": "32",
+        "name": "Suki Burks",
+        "position": "Developer",
+        "salary": "$114,500",
+        "start_date": "2009\/10\/22",
+        "office": "London",
+        "extn": "6832"
+    },
+    {
+        "id": "33",
+        "name": "Prescott Bartlett",
+        "position": "Technical Author",
+        "salary": "$145,000",
+        "start_date": "2011\/05\/07",
+        "office": "London",
+        "extn": "3606"
+    },
+    {
+        "id": "34",
+        "name": "Gavin Cortez",
+        "position": "Team Leader",
+        "salary": "$235,500",
+        "start_date": "2008\/10\/26",
+        "office": "San Francisco",
+        "extn": "2860"
+    },
+    {
+        "id": "35",
+        "name": "Martena Mccray",
+        "position": "Post-Sales support",
+        "salary": "$324,050",
+        "start_date": "2011\/03\/09",
+        "office": "Edinburgh",
+        "extn": "8240"
+    },
+    {
+        "id": "36",
+        "name": "Unity Butler",
+        "position": "Marketing Designer",
+        "salary": "$85,675",
+        "start_date": "2009\/12\/09",
+        "office": "San Francisco",
+        "extn": "5384"
+    },
+    {
+        "id": "37",
+        "name": "Howard Hatfield",
+        "position": "Office Manager",
+        "salary": "$164,500",
+        "start_date": "2008\/12\/16",
+        "office": "San Francisco",
+        "extn": "7031"
+    },
+    {
+        "id": "38",
+        "name": "Hope Fuentes",
+        "position": "Secretary",
+        "salary": "$109,850",
+        "start_date": "2010\/02\/12",
+        "office": "San Francisco",
+        "extn": "6318"
+    },
+    {
+        "id": "39",
+        "name": "Vivian Harrell",
+        "position": "Financial Controller",
+        "salary": "$452,500",
+        "start_date": "2009\/02\/14",
+        "office": "San Francisco",
+        "extn": "9422"
+    },
+    {
+        "id": "40",
+        "name": "Timothy Mooney",
+        "position": "Office Manager",
+        "salary": "$136,200",
+        "start_date": "2008\/12\/11",
+        "office": "London",
+        "extn": "7580"
+    },
+    {
+        "id": "41",
+        "name": "Jackson Bradshaw",
+        "position": "Director",
+        "salary": "$645,750",
+        "start_date": "2008\/09\/26",
+        "office": "New York",
+        "extn": "1042"
+    },
+    {
+        "id": "42",
+        "name": "Olivia Liang",
+        "position": "Support Engineer",
+        "salary": "$234,500",
+        "start_date": "2011\/02\/03",
+        "office": "Singapore",
+        "extn": "2120"
+    },
+    {
+        "id": "43",
+        "name": "Bruno Nash",
+        "position": "Software Engineer",
+        "salary": "$163,500",
+        "start_date": "2011\/05\/03",
+        "office": "London",
+        "extn": "6222"
+    },
+    {
+        "id": "44",
+        "name": "Sakura Yamamoto",
+        "position": "Support Engineer",
+        "salary": "$139,575",
+        "start_date": "2009\/08\/19",
+        "office": "Tokyo",
+        "extn": "9383"
+    },
+    {
+        "id": "45",
+        "name": "Thor Walton",
+        "position": "Developer",
+        "salary": "$98,540",
+        "start_date": "2013\/08\/11",
+        "office": "New York",
+        "extn": "8327"
+    },
+    {
+        "id": "46",
+        "name": "Finn Camacho",
+        "position": "Support Engineer",
+        "salary": "$87,500",
+        "start_date": "2009\/07\/07",
+        "office": "San Francisco",
+        "extn": "2927"
+    },
+    {
+        "id": "47",
+        "name": "Serge Baldwin",
+        "position": "Data Coordinator",
+        "salary": "$138,575",
+        "start_date": "2012\/04\/09",
+        "office": "Singapore",
+        "extn": "8352"
+    },
+    {
+        "id": "48",
+        "name": "Zenaida Frank",
+        "position": "Software Engineer",
+        "salary": "$125,250",
+        "start_date": "2010\/01\/04",
+        "office": "New York",
+        "extn": "7439"
+    },
+    {
+        "id": "49",
+        "name": "Zorita Serrano",
+        "position": "Software Engineer",
+        "salary": "$115,000",
+        "start_date": "2012\/06\/01",
+        "office": "San Francisco",
+        "extn": "4389"
+    },
+    {
+        "id": "50",
+        "name": "Jennifer Acosta",
+        "position": "Junior Javascript Developer",
+        "salary": "$75,650",
+        "start_date": "2013\/02\/01",
+        "office": "Edinburgh",
+        "extn": "3431"
+    },
+    {
+        "id": "51",
+        "name": "Cara Stevens",
+        "position": "Sales Assistant",
+        "salary": "$145,600",
+        "start_date": "2011\/12\/06",
+        "office": "New York",
+        "extn": "3990"
+    },
+    {
+        "id": "52",
+        "name": "Hermione Butler",
+        "position": "Regional Director",
+        "salary": "$356,250",
+        "start_date": "2011\/03\/21",
+        "office": "London",
+        "extn": "1016"
+    },
+    {
+        "id": "53",
+        "name": "Lael Greer",
+        "position": "Systems Administrator",
+        "salary": "$103,500",
+        "start_date": "2009\/02\/27",
+        "office": "London",
+        "extn": "6733"
+    },
+    {
+        "id": "54",
+        "name": "Jonas Alexander",
+        "position": "Developer",
+        "salary": "$86,500",
+        "start_date": "2010\/07\/14",
+        "office": "San Francisco",
+        "extn": "8196"
+    },
+    {
+        "id": "55",
+        "name": "Shad Decker",
+        "position": "Regional Director",
+        "salary": "$183,000",
+        "start_date": "2008\/11\/13",
+        "office": "Edinburgh",
+        "extn": "6373"
+    },
+    {
+        "id": "56",
+        "name": "Michael Bruce",
+        "position": "Javascript Developer",
+        "salary": "$183,000",
+        "start_date": "2011\/06\/27",
+        "office": "Singapore",
+        "extn": "5384"
+    },
+    {
+        "id": "57",
+        "name": "Donna Snider",
+        "position": "Customer Support",
+        "salary": "$112,000",
+        "start_date": "2011\/01\/25",
+        "office": "New York",
+        "extn": "4226"
+    }
+]

examples/ajax/data/objects_subarrays.txt

@@ -0,0 +1,745 @@
+{
+    "data": [
+        {
+            "name": [
+                "Nixon",
+                "Tiger"
+            ],
+            "hr": [
+                "System Architect",
+                "$320,800",
+                "2011\/04\/25"
+            ],
+            "office": "Edinburgh",
+            "extn": "5421"
+        },
+        {
+            "name": [
+                "Winters",
+                "Garrett"
+            ],
+            "hr": [
+                "Accountant",
+                "$170,750",
+                "2011\/07\/25"
+            ],
+            "office": "Tokyo",
+            "extn": "8422"
+        },
+        {
+            "name": [
+                "Cox",
+                "Ashton"
+            ],
+            "hr": [
+                "Junior Technical Author",
+                "$86,000",
+                "2009\/01\/12"
+            ],
+            "office": "San Francisco",
+            "extn": "1562"
+        },
+        {
+            "name": [
+                "Kelly",
+                "Cedric"
+            ],
+            "hr": [
+                "Senior Javascript Developer",
+                "$433,060",
+                "2012\/03\/29"
+            ],
+            "office": "Edinburgh",
+            "extn": "6224"
+        },
+        {
+            "name": [
+                "Satou",
+                "Airi"
+            ],
+            "hr": [
+                "Accountant",
+                "$162,700",
+                "2008\/11\/28"
+            ],
+            "office": "Tokyo",
+            "extn": "5407"
+        },
+        {
+            "name": [
+                "Williamson",
+                "Brielle"
+            ],
+            "hr": [
+                "Integration Specialist",
+                "$372,000",
+                "2012\/12\/02"
+            ],
+            "office": "New York",
+            "extn": "4804"
+        },
+        {
+            "name": [
+                "Chandler",
+                "Herrod"
+            ],
+            "hr": [
+                "Sales Assistant",
+                "$137,500",
+                "2012\/08\/06"
+            ],
+            "office": "San Francisco",
+            "extn": "9608"
+        },
+        {
+            "name": [
+                "Davidson",
+                "Rhona"
+            ],
+            "hr": [
+                "Integration Specialist",
+                "$327,900",
+                "2010\/10\/14"
+            ],
+            "office": "Tokyo",
+            "extn": "6200"
+        },
+        {
+            "name": [
+                "Hurst",
+                "Colleen"
+            ],
+            "hr": [
+                "Javascript Developer",
+                "$205,500",
+                "2009\/09\/15"
+            ],
+            "office": "San Francisco",
+            "extn": "2360"
+        },
+        {
+            "name": [
+                "Frost",
+                "Sonya"
+            ],
+            "hr": [
+                "Software Engineer",
+                "$103,600",
+                "2008\/12\/13"
+            ],
+            "office": "Edinburgh",
+            "extn": "1667"
+        },
+        {
+            "name": [
+                "Gaines",
+                "Jena"
+            ],
+            "hr": [
+                "Office Manager",
+                "$90,560",
+                "2008\/12\/19"
+            ],
+            "office": "London",
+            "extn": "3814"
+        },
+        {
+            "name": [
+                "Flynn",
+                "Quinn"
+            ],
+            "hr": [
+                "Support Lead",
+                "$342,000",
+                "2013\/03\/03"
+            ],
+            "office": "Edinburgh",
+            "extn": "9497"
+        },
+        {
+            "name": [
+                "Marshall",
+                "Charde"
+            ],
+            "hr": [
+                "Regional Director",
+                "$470,600",
+                "2008\/10\/16"
+            ],
+            "office": "San Francisco",
+            "extn": "6741"
+        },
+        {
+            "name": [
+                "Kennedy",
+                "Haley"
+            ],
+            "hr": [
+                "Senior Marketing Designer",
+                "$313,500",
+                "2012\/12\/18"
+            ],
+            "office": "London",
+            "extn": "3597"
+        },
+        {
+            "name": [
+                "Fitzpatrick",
+                "Tatyana"
+            ],
+            "hr": [
+                "Regional Director",
+                "$385,750",
+                "2010\/03\/17"
+            ],
+            "office": "London",
+            "extn": "1965"
+        },
+        {
+            "name": [
+                "Silva",
+                "Michael"
+            ],
+            "hr": [
+                "Marketing Designer",
+                "$198,500",
+                "2012\/11\/27"
+            ],
+            "office": "London",
+            "extn": "1581"
+        },
+        {
+            "name": [
+                "Byrd",
+                "Paul"
+            ],
+            "hr": [
+                "Chief Financial Officer (CFO)",
+                "$725,000",
+                "2010\/06\/09"
+            ],
+            "office": "New York",
+            "extn": "3059"
+        },
+        {
+            "name": [
+                "Little",
+                "Gloria"
+            ],
+            "hr": [
+                "Systems Administrator",
+                "$237,500",
+                "2009\/04\/10"
+            ],
+            "office": "New York",
+            "extn": "1721"
+        },
+        {
+            "name": [
+                "Greer",
+                "Bradley"
+            ],
+            "hr": [
+                "Software Engineer",
+                "$132,000",
+                "2012\/10\/13"
+            ],
+            "office": "London",
+            "extn": "2558"
+        },
+        {
+            "name": [
+                "Rios",
+                "Dai"
+            ],
+            "hr": [
+                "Personnel Lead",
+                "$217,500",
+                "2012\/09\/26"
+            ],
+            "office": "Edinburgh",
+            "extn": "2290"
+        },
+        {
+            "name": [
+                "Caldwell",
+                "Jenette"
+            ],
+            "hr": [
+                "Development Lead",
+                "$345,000",
+                "2011\/09\/03"
+            ],
+            "office": "New York",
+            "extn": "1937"
+        },
+        {
+            "name": [
+                "Berry",
+                "Yuri"
+            ],
+            "hr": [
+                "Chief Marketing Officer (CMO)",
+                "$675,000",
+                "2009\/06\/25"
+            ],
+            "office": "New York",
+            "extn": "6154"
+        },
+        {
+            "name": [
+                "Vance",
+                "Caesar"
+            ],
+            "hr": [
+                "Pre-Sales Support",
+                "$106,450",
+                "2011\/12\/12"
+            ],
+            "office": "New York",
+            "extn": "8330"
+        },
+        {
+            "name": [
+                "Wilder",
+                "Doris"
+            ],
+            "hr": [
+                "Sales Assistant",
+                "$85,600",
+                "2010\/09\/20"
+            ],
+            "office": "Sidney",
+            "extn": "3023"
+        },
+        {
+            "name": [
+                "Ramos",
+                "Angelica"
+            ],
+            "hr": [
+                "Chief Executive Officer (CEO)",
+                "$1,200,000",
+                "2009\/10\/09"
+            ],
+            "office": "London",
+            "extn": "5797"
+        },
+        {
+            "name": [
+                "Joyce",
+                "Gavin"
+            ],
+            "hr": [
+                "Developer",
+                "$92,575",
+                "2010\/12\/22"
+            ],
+            "office": "Edinburgh",
+            "extn": "8822"
+        },
+        {
+            "name": [
+                "Chang",
+                "Jennifer"
+            ],
+            "hr": [
+                "Regional Director",
+                "$357,650",
+                "2010\/11\/14"
+            ],
+            "office": "Singapore",
+            "extn": "9239"
+        },
+        {
+            "name": [
+                "Wagner",
+                "Brenden"
+            ],
+            "hr": [
+                "Software Engineer",
+                "$206,850",
+                "2011\/06\/07"
+            ],
+            "office": "San Francisco",
+            "extn": "1314"
+        },
+        {
+            "name": [
+                "Green",
+                "Fiona"
+            ],
+            "hr": [
+                "Chief Operating Officer (COO)",
+                "$850,000",
+                "2010\/03\/11"
+            ],
+            "office": "San Francisco",
+            "extn": "2947"
+        },
+        {
+            "name": [
+                "Itou",
+                "Shou"
+            ],
+            "hr": [
+                "Regional Marketing",
+                "$163,000",
+                "2011\/08\/14"
+            ],
+            "office": "Tokyo",
+            "extn": "8899"
+        },
+        {
+            "name": [
+                "House",
+                "Michelle"
+            ],
+            "hr": [
+                "Integration Specialist",
+                "$95,400",
+                "2011\/06\/02"
+            ],
+            "office": "Sidney",
+            "extn": "2769"
+        },
+        {
+            "name": [
+                "Burks",
+                "Suki"
+            ],
+            "hr": [
+                "Developer",
+                "$114,500",
+                "2009\/10\/22"
+            ],
+            "office": "London",
+            "extn": "6832"
+        },
+        {
+            "name": [
+                "Bartlett",
+                "Prescott"
+            ],
+            "hr": [
+                "Technical Author",
+                "$145,000",
+                "2011\/05\/07"
+            ],
+            "office": "London",
+            "extn": "3606"
+        },
+        {
+            "name": [
+                "Cortez",
+                "Gavin"
+            ],
+            "hr": [
+                "Team Leader",
+                "$235,500",
+                "2008\/10\/26"
+            ],
+            "office": "San Francisco",
+            "extn": "2860"
+        },
+        {
+            "name": [
+                "Mccray",
+                "Martena"
+            ],
+            "hr": [
+                "Post-Sales support",
+                "$324,050",
+                "2011\/03\/09"
+            ],
+            "office": "Edinburgh",
+            "extn": "8240"
+        },
+        {
+            "name": [
+                "Butler",
+                "Unity"
+            ],
+            "hr": [
+                "Marketing Designer",
+                "$85,675",
+                "2009\/12\/09"
+            ],
+            "office": "San Francisco",
+            "extn": "5384"
+        },
+        {
+            "name": [
+                "Hatfield",
+                "Howard"
+            ],
+            "hr": [
+                "Office Manager",
+                "$164,500",
+                "2008\/12\/16"
+            ],
+            "office": "San Francisco",
+            "extn": "7031"
+        },
+        {
+            "name": [
+                "Fuentes",
+                "Hope"
+            ],
+            "hr": [
+                "Secretary",
+                "$109,850",
+                "2010\/02\/12"
+            ],
+            "office": "San Francisco",
+            "extn": "6318"
+        },
+        {
+            "name": [
+                "Harrell",
+                "Vivian"
+            ],
+            "hr": [
+                "Financial Controller",
+                "$452,500",
+                "2009\/02\/14"
+            ],
+            "office": "San Francisco",
+            "extn": "9422"
+        },
+        {
+            "name": [
+                "Mooney",
+                "Timothy"
+            ],
+            "hr": [
+                "Office Manager",
+                "$136,200",
+                "2008\/12\/11"
+            ],
+            "office": "London",
+            "extn": "7580"
+        },
+        {
+            "name": [
+                "Bradshaw",
+                "Jackson"
+            ],
+            "hr": [
+                "Director",
+                "$645,750",
+                "2008\/09\/26"
+            ],
+            "office": "New York",
+            "extn": "1042"
+        },
+        {
+            "name": [
+                "Liang",
+                "Olivia"
+            ],
+            "hr": [
+                "Support Engineer",
+                "$234,500",
+                "2011\/02\/03"
+            ],
+            "office": "Singapore",
+            "extn": "2120"
+        },
+        {
+            "name": [
+                "Nash",
+                "Bruno"
+            ],
+            "hr": [
+                "Software Engineer",
+                "$163,500",
+                "2011\/05\/03"
+            ],
+            "office": "London",
+            "extn": "6222"
+        },
+        {
+            "name": [
+                "Yamamoto",
+                "Sakura"
+            ],
+            "hr": [
+                "Support Engineer",
+                "$139,575",
+                "2009\/08\/19"
+            ],
+            "office": "Tokyo",
+            "extn": "9383"
+        },
+        {
+            "name": [
+                "Walton",
+                "Thor"
+            ],
+            "hr": [
+                "Developer",
+                "$98,540",
+                "2013\/08\/11"
+            ],
+            "office": "New York",
+            "extn": "8327"
+        },
+        {
+            "name": [
+                "Camacho",
+                "Finn"
+            ],
+            "hr": [
+                "Support Engineer",
+                "$87,500",
+                "2009\/07\/07"
+            ],
+            "office": "San Francisco",
+            "extn": "2927"
+        },
+        {
+            "name": [
+                "Baldwin",
+                "Serge"
+            ],
+            "hr": [
+                "Data Coordinator",
+                "$138,575",
+                "2012\/04\/09"
+            ],
+            "office": "Singapore",
+            "extn": "8352"
+        },
+        {
+            "name": [
+                "Frank",
+                "Zenaida"
+            ],
+            "hr": [
+                "Software Engineer",
+                "$125,250",
+                "2010\/01\/04"
+            ],
+            "office": "New York",
+            "extn": "7439"
+        },
+        {
+            "name": [
+                "Serrano",
+                "Zorita"
+            ],
+            "hr": [
+                "Software Engineer",
+                "$115,000",
+                "2012\/06\/01"
+            ],
+            "office": "San Francisco",
+            "extn": "4389"
+        },
+        {
+            "name": [
+                "Acosta",
+                "Jennifer"
+            ],
+            "hr": [
+                "Junior Javascript Developer",
+                "$75,650",
+                "2013\/02\/01"
+            ],
+            "office": "Edinburgh",
+            "extn": "3431"
+        },
+        {
+            "name": [
+                "Stevens",
+                "Cara"
+            ],
+            "hr": [
+                "Sales Assistant",
+                "$145,600",
+                "2011\/12\/06"
+            ],
+            "office": "New York",
+            "extn": "3990"
+        },
+        {
+            "name": [
+                "Butler",
+                "Hermione"
+            ],
+            "hr": [
+                "Regional Director",
+                "$356,250",
+                "2011\/03\/21"
+            ],
+            "office": "London",
+            "extn": "1016"
+        },
+        {
+            "name": [
+                "Greer",
+                "Lael"
+            ],
+            "hr": [
+                "Systems Administrator",
+                "$103,500",
+                "2009\/02\/27"
+            ],
+            "office": "London",
+            "extn": "6733"
+        },
+        {
+            "name": [
+                "Alexander",
+                "Jonas"
+            ],
+            "hr": [
+                "Developer",
+                "$86,500",
+                "2010\/07\/14"
+            ],
+            "office": "San Francisco",
+            "extn": "8196"
+        },
+        {
+            "name": [
+                "Decker",
+                "Shad"
+            ],
+            "hr": [
+                "Regional Director",
+                "$183,000",
+                "2008\/11\/13"
+            ],
+            "office": "Edinburgh",
+            "extn": "6373"
+        },
+        {
+            "name": [
+                "Bruce",
+                "Michael"
+            ],
+            "hr": [
+                "Javascript Developer",
+                "$183,000",
+                "2011\/06\/27"
+            ],
+            "office": "Singapore",
+            "extn": "5384"
+        },
+        {
+            "name": [
+                "Snider",
+                "Donna"
+            ],
+            "hr": [
+                "Customer Support",
+                "$112,000",
+                "2011\/01\/25"
+            ],
+            "office": "New York",
+            "extn": "4226"
+        }
+    ]
+}

examples/ajax/data/orthogonal.txt

@@ -0,0 +1,631 @@
+{
+    "data": [
+        {
+            "name": "Tiger Nixon",
+            "position": "System Architect",
+            "salary": "$320,800",
+            "start_date": {
+                "display": "Mon 25th Apr 11",
+                "timestamp": "1303689600"
+            },
+            "office": "Edinburgh",
+            "extn": "5421"
+        },
+        {
+            "name": "Garrett Winters",
+            "position": "Accountant",
+            "salary": "$170,750",
+            "start_date": {
+                "display": "Mon 25th Jul 11",
+                "timestamp": "1311552000"
+            },
+            "office": "Tokyo",
+            "extn": "8422"
+        },
+        {
+            "name": "Ashton Cox",
+            "position": "Junior Technical Author",
+            "salary": "$86,000",
+            "start_date": {
+                "display": "Mon 12th Jan 09",
+                "timestamp": "1231718400"
+            },
+            "office": "San Francisco",
+            "extn": "1562"
+        },
+        {
+            "name": "Cedric Kelly",
+            "position": "Senior Javascript Developer",
+            "salary": "$433,060",
+            "start_date": {
+                "display": "Thu 29th Mar 12",
+                "timestamp": "1332979200"
+            },
+            "office": "Edinburgh",
+            "extn": "6224"
+        },
+        {
+            "name": "Airi Satou",
+            "position": "Accountant",
+            "salary": "$162,700",
+            "start_date": {
+                "display": "Fri 28th Nov 08",
+                "timestamp": "1227830400"
+            },
+            "office": "Tokyo",
+            "extn": "5407"
+        },
+        {
+            "name": "Brielle Williamson",
+            "position": "Integration Specialist",
+            "salary": "$372,000",
+            "start_date": {
+                "display": "Sun 2nd Dec 12",
+                "timestamp": "1354406400"
+            },
+            "office": "New York",
+            "extn": "4804"
+        },
+        {
+            "name": "Herrod Chandler",
+            "position": "Sales Assistant",
+            "salary": "$137,500",
+            "start_date": {
+                "display": "Mon 6th Aug 12",
+                "timestamp": "1344211200"
+            },
+            "office": "San Francisco",
+            "extn": "9608"
+        },
+        {
+            "name": "Rhona Davidson",
+            "position": "Integration Specialist",
+            "salary": "$327,900",
+            "start_date": {
+                "display": "Thu 14th Oct 10",
+                "timestamp": "1287014400"
+            },
+            "office": "Tokyo",
+            "extn": "6200"
+        },
+        {
+            "name": "Colleen Hurst",
+            "position": "Javascript Developer",
+            "salary": "$205,500",
+            "start_date": {
+                "display": "Tue 15th Sep 09",
+                "timestamp": "1252972800"
+            },
+            "office": "San Francisco",
+            "extn": "2360"
+        },
+        {
+            "name": "Sonya Frost",
+            "position": "Software Engineer",
+            "salary": "$103,600",
+            "start_date": {
+                "display": "Sat 13th Dec 08",
+                "timestamp": "1229126400"
+            },
+            "office": "Edinburgh",
+            "extn": "1667"
+        },
+        {
+            "name": "Jena Gaines",
+            "position": "Office Manager",
+            "salary": "$90,560",
+            "start_date": {
+                "display": "Fri 19th Dec 08",
+                "timestamp": "1229644800"
+            },
+            "office": "London",
+            "extn": "3814"
+        },
+        {
+            "name": "Quinn Flynn",
+            "position": "Support Lead",
+            "salary": "$342,000",
+            "start_date": {
+                "display": "Sun 3rd Mar 13",
+                "timestamp": "1362268800"
+            },
+            "office": "Edinburgh",
+            "extn": "9497"
+        },
+        {
+            "name": "Charde Marshall",
+            "position": "Regional Director",
+            "salary": "$470,600",
+            "start_date": {
+                "display": "Thu 16th Oct 08",
+                "timestamp": "1224115200"
+            },
+            "office": "San Francisco",
+            "extn": "6741"
+        },
+        {
+            "name": "Haley Kennedy",
+            "position": "Senior Marketing Designer",
+            "salary": "$313,500",
+            "start_date": {
+                "display": "Tue 18th Dec 12",
+                "timestamp": "1355788800"
+            },
+            "office": "London",
+            "extn": "3597"
+        },
+        {
+            "name": "Tatyana Fitzpatrick",
+            "position": "Regional Director",
+            "salary": "$385,750",
+            "start_date": {
+                "display": "Wed 17th Mar 10",
+                "timestamp": "1268784000"
+            },
+            "office": "London",
+            "extn": "1965"
+        },
+        {
+            "name": "Michael Silva",
+            "position": "Marketing Designer",
+            "salary": "$198,500",
+            "start_date": {
+                "display": "Tue 27th Nov 12",
+                "timestamp": "1353974400"
+            },
+            "office": "London",
+            "extn": "1581"
+        },
+        {
+            "name": "Paul Byrd",
+            "position": "Chief Financial Officer (CFO)",
+            "salary": "$725,000",
+            "start_date": {
+                "display": "Wed 9th Jun 10",
+                "timestamp": "1276041600"
+            },
+            "office": "New York",
+            "extn": "3059"
+        },
+        {
+            "name": "Gloria Little",
+            "position": "Systems Administrator",
+            "salary": "$237,500",
+            "start_date": {
+                "display": "Fri 10th Apr 09",
+                "timestamp": "1239321600"
+            },
+            "office": "New York",
+            "extn": "1721"
+        },
+        {
+            "name": "Bradley Greer",
+            "position": "Software Engineer",
+            "salary": "$132,000",
+            "start_date": {
+                "display": "Sat 13th Oct 12",
+                "timestamp": "1350086400"
+            },
+            "office": "London",
+            "extn": "2558"
+        },
+        {
+            "name": "Dai Rios",
+            "position": "Personnel Lead",
+            "salary": "$217,500",
+            "start_date": {
+                "display": "Wed 26th Sep 12",
+                "timestamp": "1348617600"
+            },
+            "office": "Edinburgh",
+            "extn": "2290"
+        },
+        {
+            "name": "Jenette Caldwell",
+            "position": "Development Lead",
+            "salary": "$345,000",
+            "start_date": {
+                "display": "Sat 3rd Sep 11",
+                "timestamp": "1315008000"
+            },
+            "office": "New York",
+            "extn": "1937"
+        },
+        {
+            "name": "Yuri Berry",
+            "position": "Chief Marketing Officer (CMO)",
+            "salary": "$675,000",
+            "start_date": {
+                "display": "Thu 25th Jun 09",
+                "timestamp": "1245888000"
+            },
+            "office": "New York",
+            "extn": "6154"
+        },
+        {
+            "name": "Caesar Vance",
+            "position": "Pre-Sales Support",
+            "salary": "$106,450",
+            "start_date": {
+                "display": "Mon 12th Dec 11",
+                "timestamp": "1323648000"
+            },
+            "office": "New York",
+            "extn": "8330"
+        },
+        {
+            "name": "Doris Wilder",
+            "position": "Sales Assistant",
+            "salary": "$85,600",
+            "start_date": {
+                "display": "Mon 20th Sep 10",
+                "timestamp": "1284940800"
+            },
+            "office": "Sidney",
+            "extn": "3023"
+        },
+        {
+            "name": "Angelica Ramos",
+            "position": "Chief Executive Officer (CEO)",
+            "salary": "$1,200,000",
+            "start_date": {
+                "display": "Fri 9th Oct 09",
+                "timestamp": "1255046400"
+            },
+            "office": "London",
+            "extn": "5797"
+        },
+        {
+            "name": "Gavin Joyce",
+            "position": "Developer",
+            "salary": "$92,575",
+            "start_date": {
+                "display": "Wed 22nd Dec 10",
+                "timestamp": "1292976000"
+            },
+            "office": "Edinburgh",
+            "extn": "8822"
+        },
+        {
+            "name": "Jennifer Chang",
+            "position": "Regional Director",
+            "salary": "$357,650",
+            "start_date": {
+                "display": "Sun 14th Nov 10",
+                "timestamp": "1289692800"
+            },
+            "office": "Singapore",
+            "extn": "9239"
+        },
+        {
+            "name": "Brenden Wagner",
+            "position": "Software Engineer",
+            "salary": "$206,850",
+            "start_date": {
+                "display": "Tue 7th Jun 11",
+                "timestamp": "1307404800"
+            },
+            "office": "San Francisco",
+            "extn": "1314"
+        },
+        {
+            "name": "Fiona Green",
+            "position": "Chief Operating Officer (COO)",
+            "salary": "$850,000",
+            "start_date": {
+                "display": "Thu 11th Mar 10",
+                "timestamp": "1268265600"
+            },
+            "office": "San Francisco",
+            "extn": "2947"
+        },
+        {
+            "name": "Shou Itou",
+            "position": "Regional Marketing",
+            "salary": "$163,000",
+            "start_date": {
+                "display": "Sun 14th Aug 11",
+                "timestamp": "1313280000"
+            },
+            "office": "Tokyo",
+            "extn": "8899"
+        },
+        {
+            "name": "Michelle House",
+            "position": "Integration Specialist",
+            "salary": "$95,400",
+            "start_date": {
+                "display": "Thu 2nd Jun 11",
+                "timestamp": "1306972800"
+            },
+            "office": "Sidney",
+            "extn": "2769"
+        },
+        {
+            "name": "Suki Burks",
+            "position": "Developer",
+            "salary": "$114,500",
+            "start_date": {
+                "display": "Thu 22nd Oct 09",
+                "timestamp": "1256169600"
+            },
+            "office": "London",
+            "extn": "6832"
+        },
+        {
+            "name": "Prescott Bartlett",
+            "position": "Technical Author",
+            "salary": "$145,000",
+            "start_date": {
+                "display": "Sat 7th May 11",
+                "timestamp": "1304726400"
+            },
+            "office": "London",
+            "extn": "3606"
+        },
+        {
+            "name": "Gavin Cortez",
+            "position": "Team Leader",
+            "salary": "$235,500",
+            "start_date": {
+                "display": "Sun 26th Oct 08",
+                "timestamp": "1224979200"
+            },
+            "office": "San Francisco",
+            "extn": "2860"
+        },
+        {
+            "name": "Martena Mccray",
+            "position": "Post-Sales support",
+            "salary": "$324,050",
+            "start_date": {
+                "display": "Wed 9th Mar 11",
+                "timestamp": "1299628800"
+            },
+            "office": "Edinburgh",
+            "extn": "8240"
+        },
+        {
+            "name": "Unity Butler",
+            "position": "Marketing Designer",
+            "salary": "$85,675",
+            "start_date": {
+                "display": "Wed 9th Dec 09",
+                "timestamp": "1260316800"
+            },
+            "office": "San Francisco",
+            "extn": "5384"
+        },
+        {
+            "name": "Howard Hatfield",
+            "position": "Office Manager",
+            "salary": "$164,500",
+            "start_date": {
+                "display": "Tue 16th Dec 08",
+                "timestamp": "1229385600"
+            },
+            "office": "San Francisco",
+            "extn": "7031"
+        },
+        {
+            "name": "Hope Fuentes",
+            "position": "Secretary",
+            "salary": "$109,850",
+            "start_date": {
+                "display": "Fri 12th Feb 10",
+                "timestamp": "1265932800"
+            },
+            "office": "San Francisco",
+            "extn": "6318"
+        },
+        {
+            "name": "Vivian Harrell",
+            "position": "Financial Controller",
+            "salary": "$452,500",
+            "start_date": {
+                "display": "Sat 14th Feb 09",
+                "timestamp": "1234569600"
+            },
+            "office": "San Francisco",
+            "extn": "9422"
+        },
+        {
+            "name": "Timothy Mooney",
+            "position": "Office Manager",
+            "salary": "$136,200",
+            "start_date": {
+                "display": "Thu 11th Dec 08",
+                "timestamp": "1228953600"
+            },
+            "office": "London",
+            "extn": "7580"
+        },
+        {
+            "name": "Jackson Bradshaw",
+            "position": "Director",
+            "salary": "$645,750",
+            "start_date": {
+                "display": "Fri 26th Sep 08",
+                "timestamp": "1222387200"
+            },
+            "office": "New York",
+            "extn": "1042"
+        },
+        {
+            "name": "Olivia Liang",
+            "position": "Support Engineer",
+            "salary": "$234,500",
+            "start_date": {
+                "display": "Thu 3rd Feb 11",
+                "timestamp": "1296691200"
+            },
+            "office": "Singapore",
+            "extn": "2120"
+        },
+        {
+            "name": "Bruno Nash",
+            "position": "Software Engineer",
+            "salary": "$163,500",
+            "start_date": {
+                "display": "Tue 3rd May 11",
+                "timestamp": "1304380800"
+            },
+            "office": "London",
+            "extn": "6222"
+        },
+        {
+            "name": "Sakura Yamamoto",
+            "position": "Support Engineer",
+            "salary": "$139,575",
+            "start_date": {
+                "display": "Wed 19th Aug 09",
+                "timestamp": "1250640000"
+            },
+            "office": "Tokyo",
+            "extn": "9383"
+        },
+        {
+            "name": "Thor Walton",
+            "position": "Developer",
+            "salary": "$98,540",
+            "start_date": {
+                "display": "Sun 11th Aug 13",
+                "timestamp": "1376179200"
+            },
+            "office": "New York",
+            "extn": "8327"
+        },
+        {
+            "name": "Finn Camacho",
+            "position": "Support Engineer",
+            "salary": "$87,500",
+            "start_date": {
+                "display": "Tue 7th Jul 09",
+                "timestamp": "1246924800"
+            },
+            "office": "San Francisco",
+            "extn": "2927"
+        },
+        {
+            "name": "Serge Baldwin",
+            "position": "Data Coordinator",
+            "salary": "$138,575",
+            "start_date": {
+                "display": "Mon 9th Apr 12",
+                "timestamp": "1333929600"
+            },
+            "office": "Singapore",
+            "extn": "8352"
+        },
+        {
+            "name": "Zenaida Frank",
+            "position": "Software Engineer",
+            "salary": "$125,250",
+            "start_date": {
+                "display": "Mon 4th Jan 10",
+                "timestamp": "1262563200"
+            },
+            "office": "New York",
+            "extn": "7439"
+        },
+        {
+            "name": "Zorita Serrano",
+            "position": "Software Engineer",
+            "salary": "$115,000",
+            "start_date": {
+                "display": "Fri 1st Jun 12",
+                "timestamp": "1338508800"
+            },
+            "office": "San Francisco",
+            "extn": "4389"
+        },
+        {
+            "name": "Jennifer Acosta",
+            "position": "Junior Javascript Developer",
+            "salary": "$75,650",
+            "start_date": {
+                "display": "Fri 1st Feb 13",
+                "timestamp": "1359676800"
+            },
+            "office": "Edinburgh",
+            "extn": "3431"
+        },
+        {
+            "name": "Cara Stevens",
+            "position": "Sales Assistant",
+            "salary": "$145,600",
+            "start_date": {
+                "display": "Tue 6th Dec 11",
+                "timestamp": "1323129600"
+            },
+            "office": "New York",
+            "extn": "3990"
+        },
+        {
+            "name": "Hermione Butler",
+            "position": "Regional Director",
+            "salary": "$356,250",
+            "start_date": {
+                "display": "Mon 21st Mar 11",
+                "timestamp": "1300665600"
+            },
+            "office": "London",
+            "extn": "1016"
+        },
+        {
+            "name": "Lael Greer",
+            "position": "Systems Administrator",
+            "salary": "$103,500",
+            "start_date": {
+                "display": "Fri 27th Feb 09",
+                "timestamp": "1235692800"
+            },
+            "office": "London",
+            "extn": "6733"
+        },
+        {
+            "name": "Jonas Alexander",
+            "position": "Developer",
+            "salary": "$86,500",
+            "start_date": {
+                "display": "Wed 14th Jul 10",
+                "timestamp": "1279065600"
+            },
+            "office": "San Francisco",
+            "extn": "8196"
+        },
+        {
+            "name": "Shad Decker",
+            "position": "Regional Director",
+            "salary": "$183,000",
+            "start_date": {
+                "display": "Thu 13th Nov 08",
+                "timestamp": "1226534400"
+            },
+            "office": "Edinburgh",
+            "extn": "6373"
+        },
+        {
+            "name": "Michael Bruce",
+            "position": "Javascript Developer",
+            "salary": "$183,000",
+            "start_date": {
+                "display": "Mon 27th Jun 11",
+                "timestamp": "1309132800"
+            },
+            "office": "Singapore",
+            "extn": "5384"
+        },
+        {
+            "name": "Donna Snider",
+            "position": "Customer Support",
+            "salary": "$112,000",
+            "start_date": {
+                "display": "Tue 25th Jan 11",
+                "timestamp": "1295913600"
+            },
+            "office": "New York",
+            "extn": "4226"
+        }
+    ]
+}

examples/ajax/deep.html

@@ -1,222 +1,473 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 <html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				var oTable = $('#example').dataTable( {
-					"bProcessing": true,
-					"sAjaxSource": "sources/deep.txt",
-					"aoColumns": [
-						{ "mDataProp": "engine" },
-						{ "mDataProp": "browser" },
-						{ "mDataProp": "platform.inner" },
-						{ "mDataProp": "platform.details.0" },
-						{ "mDataProp": "platform.details.1" }
-					]
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables AJAX source example - deep property reading for a data source
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>The ability of DataTables to read arbitrary object properties as a column data source is extended to <i>n</i> levels of objects, through the use of standard Javascript dotted object notation. For example in this example "platform.details.0" refers to the first element of the array "details", of the object "platform", for each column. Any level of 'dots' can be used.</p>
-			
-			<h1>Live example</h1>
-			<div id="dynamic">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th width="20%">Rendering engine</th>
-			<th width="25%">Browser</th>
-			<th width="25%">Platform(s)</th>
-			<th width="15%">Engine version</th>
-			<th width="15%">CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	var oTable = $('#example').dataTable( {
-		"bProcessing": true,
-		"sAjaxSource": "sources/deep.txt",
-		"aoColumns": [
-			{ "mDataProp": "engine" },
-			{ "mDataProp": "browser" },
-			{ "mDataProp": "platform.inner" },
-			{ "mDataProp": "platform.details.0" },
-			{ "mDataProp": "platform.details.1" }
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Nested object data (objects)</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"processing": true,
+		"ajax": "data/objects_deep.txt",
+		"columns": [
+			{ "data": "name" },
+			{ "data": "hr.position" },
+			{ "data": "contact.0" },
+			{ "data": "contact.1" },
+			{ "data": "hr.start_date" },
+			{ "data": "hr.salary" }
 		]
 	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+} );
 
-			<h1>Server response</h1>
-			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
-			<pre id="latest_xhr" class="brush: js;"></pre>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Nested object data (objects)</span></h1>
+			<div class="info">
+				<p>DataTables has the ability to use data from almost any JSON data source through the use of the <a href=
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option. In its simplest
+				case, it can be used to read arbitrary object properties, but can also be extended to <em>n</em> levels of nested objects / arrays through the use of standard
+				Javascript dotted object notation. Each dot (<code>.</code>) in the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
+				"DataTables initialisation option">columns.data</code></a> option represents another object level.</p>
+				<p>In this example <code>hr.position</code> refers to the <code>position</code> property of the <code>hr</code> object in the row's data source object, while
+				<code>contact.0</code> refers to the first element of the <code>contact</code> array. Any number of dots can be used to obtain deeply nested data.</p>
+				<p>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:</p>
+				<pre><code class="multiline">{
+	"name": "Tiger Nixon",
+	"hr": {
+		"position": "System Architect",
+		"salary": "$3,120",
+		"start_date": "2011/04/25"
+	},
+	"contact": [
+		"Edinburgh",
+		"5421"
+	]
+}
+</code></pre>
 			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable( {
+		&quot;processing&quot;: true,
+		&quot;ajax&quot;: &quot;data/objects_deep.txt&quot;,
+		&quot;columns&quot;: [
+			{ &quot;data&quot;: &quot;name&quot; },
+			{ &quot;data&quot;: &quot;hr.position&quot; },
+			{ &quot;data&quot;: &quot;contact.0&quot; },
+			{ &quot;data&quot;: &quot;contact.1&quot; },
+			{ &quot;data&quot;: &quot;hr.start_date&quot; },
+			{ &quot;data&quot;: &quot;hr.salary&quot; }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
 			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Ajax</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li class="active">
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
 			</div>
 		</div>
-	</body>
+	</section>
+</body>
 </html>

examples/ajax/defer_render.html

@@ -1,210 +1,444 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 <html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				var oTable = $('#example').dataTable( {
-					"bProcessing": true,
-					"sAjaxSource": "sources/arrays.txt",
-					"bDeferRender": true
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables AJAX source example - with deferred rendering
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>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 build in deferred rendering. Rather than have DataTables create all TR and TD nodes required for the table when the data is loaded, when deferred rendering is enabled, DataTables will only create the nodes required for each individual display - these nodes are then retained incase they are needed again. This can give a significant performance increase, since a lot less work is done at initialisation time.</p>
-			
-			<h1>Live example</h1>
-			<div id="dynamic">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th width="20%">Rendering engine</th>
-			<th width="25%">Browser</th>
-			<th width="25%">Platform(s)</th>
-			<th width="15%">Engine version</th>
-			<th width="15%">CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable( {
-		"bProcessing": true,
-		"sAjaxSource": "sources/arrays.txt",
-		"bDeferRender": true
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Deferred rendering for speed</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"ajax": "data/arrays.txt",
+		"deferRender": true
 	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+} );
 
-			<h1>Server response</h1>
-			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
-			<pre id="latest_xhr" class="brush: js;"></pre>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Deferred rendering for speed</span></h1>
+			<div class="info">
+				<p>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 <a href="//datatables.net/reference/option/deferRender"><code class="option" title=
+				"DataTables initialisation option">deferRender</code></a> option.</p>
+				<p>When deferred rendering is enabled, rather than having DataTables create all <code class="tag" title="HTML tag">TR</code> and <code class="tag" title=
+				"HTML tag">TD</code> 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.</p>
+				<p>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.</p>
 			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable( {
+		&quot;ajax&quot;: &quot;data/arrays.txt&quot;,
+		&quot;deferRender&quot;: true
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
 			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Ajax</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li class="active">
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
 			</div>
 		</div>
-	</body>
+	</section>
+</body>
 </html>

examples/ajax/index.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<title>DataTables examples - Ajax sourced data</title>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Ajax sourced data</span></h1>
+			<div class="info">
+				<p>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
+				<a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option, which has a number of
+				options to customise how the data is retrieved from the server.</p>
+				<p>The examples in this section demonstrate the use of Ajax loading data in DataTables, with client-side processing.</p>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Ajax</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/ajax/null_data_source.html

@@ -1,214 +1,472 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 <html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				var oTable = $('#example').dataTable( {
-					"bProcessing": true,
-					"sAjaxSource": "sources/arrays.txt",
-					"aoColumns": [
-						null,
-						null,
-						null,
-						null,
-						null,
-						{ "mDataProp": null }
-					]
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables AJAX source example - null data source for a column
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>In some tables it can be useful to not need to specify any data source for a column, as it's content is automatically generated (for example using fnRender). This is fairly common with add, edit and delete columns for a CRUD interface. You can now use the <b>mDataProp</b> set to <i>null</i> to specify that the column has no data source. DataTables will render this column as empty.</p>
-			
-			<h1>Live example</h1>
-			<div id="dynamic">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th width="20%">Rendering engine</th>
-			<th width="25%">Browser</th>
-			<th width="25%">Platform(s)</th>
-			<th width="15%">Engine version</th>
-			<th width="10%">CSS grade</th>
-			<th width="5%">Empty!</th>
-		</tr>
-	</thead>
-	<tbody></tbody>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	var oTable = $('#example').dataTable( {
-		"bProcessing": true,
-		"sAjaxSource": "sources/arrays.txt",
-		"aoColumns": [
-			null,
-			null,
-			null,
-			null,
-			null,
-			{ "mDataProp": null }
-		]
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Generated content for a column</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+$(document).ready(function() {
+	var table = $('#example').DataTable( {
+		"ajax": "data/arrays.txt",
+		"columnDefs": [ {
+			"targets": -1,
+			"data": null,
+			"defaultContent": "<button>Click!</button>"
+		} ]
 	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
 
-			<h1>Server response</h1>
-			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
-			<pre id="latest_xhr" class="brush: js;"></pre>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
+	$('#example tbody').on( 'click', 'button', function () {
+		var data = table.row( $(this).parents('tr') ).data();
+		alert( data[0] +"'s salary is: "+ data[ 5 ] );
+	} );
+} );
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Generated content for a column</span></h1>
+			<div class="info">
+				<p>In some tables you might wish to have some content generated automatically. This can be done in a number of ways:</p>
+				<ul class="markdown">
+					<li>
+						<a href="//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> for
+						content that is dynamic (i.e. based upon the row's data)
 					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
+					<li>
+						<a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
+						"DataTables initialisation option">columns.defaultContent</code></a> for static content (i.e. simple strings)
 					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
 				</ul>
+				<p>This examples shows the use of <a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
+				"DataTables initialisation option">columns.defaultContent</code></a> to create a <em>button</em> element in the last column of the table. A simple jQuery
+				<code>click</code> event listener is used to watch for clicks on the row, and when activated uses the <a href=
+				"//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()</code></a> method to get the data for the row and show a
+				bit of information about it in an <code>alert</code> box. This is a simple use case, but it can be built up to be arbitrarily complex.</p>
+				<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
+				"DataTables initialisation option">columns.data</code></a> option for the column has been set to <code>null</code> to indicate that the column has no information
+				contained in the data source object.</p>
 			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	var table = $('#example').DataTable( {
+		&quot;ajax&quot;: &quot;data/arrays.txt&quot;,
+		&quot;columnDefs&quot;: [ {
+			&quot;targets&quot;: -1,
+			&quot;data&quot;: null,
+			&quot;defaultContent&quot;: &quot;&lt;button&gt;Click!&lt;/button&gt;&quot;
+		} ]
+	} );
+
+	$('#example tbody').on( 'click', 'button', function () {
+		var data = table.row( $(this).parents('tr') ).data();
+		alert( data[0] +&quot;'s salary is: &quot;+ data[ 5 ] );
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
 			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Ajax</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li class="active">
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
 			</div>
 		</div>
-	</body>
+	</section>
+</body>
 </html>

examples/ajax/objects.html

@@ -1,222 +1,467 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 <html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				var oTable = $('#example').dataTable( {
-					"bProcessing": true,
-					"sAjaxSource": "sources/objects.txt",
-					"aoColumns": [
-						{ "mDataProp": "engine" },
-						{ "mDataProp": "browser" },
-						{ "mDataProp": "platform" },
-						{ "mDataProp": "version" },
-						{ "mDataProp": "grade" }
-					]
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables AJAX source example - array of objects as a data source
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>By default, DataTables will expect an array of arrays for its data source, with each cell in the table being exactly described in the data source. However, this can often be quite limiting, or not suitable for a particular data source, so it is possible to specify which property of a source object that DataTables should read for each column. In this example the Ajax source returns an array of objects (one object for each row), and will then read the required property for each column.</p>
-			
-			<h1>Live example</h1>
-			<div id="dynamic">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th width="20%">Rendering engine</th>
-			<th width="25%">Browser</th>
-			<th width="25%">Platform(s)</th>
-			<th width="15%">Engine version</th>
-			<th width="15%">CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	var oTable = $('#example').dataTable( {
-		"bProcessing": true,
-		"sAjaxSource": "sources/objects.txt",
-		"aoColumns": [
-			{ "mDataProp": "engine" },
-			{ "mDataProp": "browser" },
-			{ "mDataProp": "platform" },
-			{ "mDataProp": "version" },
-			{ "mDataProp": "grade" }
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Ajax data source (objects)</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"ajax": "data/objects.txt",
+		"columns": [
+			{ "data": "name" },
+			{ "data": "position" },
+			{ "data": "office" },
+			{ "data": "extn" },
+			{ "data": "start_date" },
+			{ "data": "salary" }
 		]
 	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+} );
 
-			<h1>Server response</h1>
-			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
-			<pre id="latest_xhr" class="brush: js;"></pre>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Ajax data source (objects)</span></h1>
+			<div class="info">
+				<p>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.</p>
+				<p>This can be done quite simply by using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
+				"DataTables initialisation option">columns.data</code></a> option which you use to tell DataTables which property to use from the data source object for each
+				column.</p>
+				<p>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:</p>
+				<pre><code class="multiline">{
+	"name":	   "Tiger Nixon",
+	"position":   "System Architect",
+	"salary":	 "$3,120",
+	"start_date": "2011/04/25",
+	"office":	 "Edinburgh",
+	"extn":	   "5421"
+}
+</code></pre>
+				<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
 			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable( {
+		&quot;ajax&quot;: &quot;data/objects.txt&quot;,
+		&quot;columns&quot;: [
+			{ &quot;data&quot;: &quot;name&quot; },
+			{ &quot;data&quot;: &quot;position&quot; },
+			{ &quot;data&quot;: &quot;office&quot; },
+			{ &quot;data&quot;: &quot;extn&quot; },
+			{ &quot;data&quot;: &quot;start_date&quot; },
+			{ &quot;data&quot;: &quot;salary&quot; }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
 			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Ajax</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li class="active">
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
 			</div>
 		</div>
-	</body>
+	</section>
+</body>
 </html>

examples/ajax/objects_subarrays.html

@@ -1,222 +1,481 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 <html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				var oTable = $('#example').dataTable( {
-					"bProcessing": true,
-					"sAjaxSource": "sources/objects_subarrays.txt",
-					"aoColumns": [
-						{ "mDataProp": "engine" },
-						{ "mDataProp": "browser" },
-						{ "mDataProp": "platform" },
-						{ "mDataProp": "details.0" },
-						{ "mDataProp": "details.1" }
-					]
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables AJAX source example - array of objects with sub-arrays as a data source
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>While the ability of DataTables to read arbitrary objects properties as a data source for any column is very powerful, it actually goes further than single level object properties; it is possible to read a data source for a column from a deeply nested array or property. This is specified in typical Javascript dotted object notation. For example "details.0" (used in this example) refers to the first property in an array called "details". "details.1" refers to the second property, etc. Object properties can also be used - for example "details.version" is perfectly valid, if that property is available in your data source.</p>
-			
-			<h1>Live example</h1>
-			<div id="dynamic">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th width="20%">Rendering engine</th>
-			<th width="25%">Browser</th>
-			<th width="25%">Platform(s)</th>
-			<th width="15%">Engine version</th>
-			<th width="15%">CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	var oTable = $('#example').dataTable( {
-		"bProcessing": true,
-		"sAjaxSource": "sources/objects_subarrays.txt",
-		"aoColumns": [
-			{ "mDataProp": "engine" },
-			{ "mDataProp": "browser" },
-			{ "mDataProp": "platform" },
-			{ "mDataProp": "details.0" },
-			{ "mDataProp": "details.1" }
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Nested object data (arrays)</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"ajax": "data/objects_subarrays.txt",
+		"columns": [
+			{ "data": "name[, ]" },
+			{ "data": "hr.0" },
+			{ "data": "office" },
+			{ "data": "extn" },
+			{ "data": "hr.2" },
+			{ "data": "hr.1" }
 		]
 	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+} );
 
-			<h1>Server response</h1>
-			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
-			<pre id="latest_xhr" class="brush: js;"></pre>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Nested object data (arrays)</span></h1>
+			<div class="info">
+				<p>The information read from an Ajax data source can be arbitrarily complex, but still be displayed by DataTables through the <a href=
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, which is
+				particularly useful for working with JSON feeds in an already defined format.</p>
+				<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> 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 <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
+				"DataTables initialisation option">columns.data</code></a> can process the data to combine and display the data in simple forms (more complex forms can be defined
+				by using <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> as a
+				function).</p>
+				<p>This example shows two different aspects of using <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
+				"DataTables initialisation option">columns.data</code></a> to read arrays:</p>
+				<ul class="markdown">
+					<li>The <em>Name</em> 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. <code>name[, ]</code>).</li>
+					<li>The <em>Position</em>, <em>Start date</em> and <em>Salary</em> columns are read directly from array elements using dotted object notation (e.g.
+					<code>hr.0</code>). 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:</li>
 				</ul>
+				<pre><code class="multiline">{
+	"name": [
+		"Nixon",
+		"Tiger"
+	],
+	"hr": [
+		"System Architect",
+		"$3,120",
+		"2011/04/25"
+	],
+	"office": "Edinburgh",
+	"extn": "5421"
+}
+</code></pre>
 			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable( {
+		&quot;ajax&quot;: &quot;data/objects_subarrays.txt&quot;,
+		&quot;columns&quot;: [
+			{ &quot;data&quot;: &quot;name[, ]&quot; },
+			{ &quot;data&quot;: &quot;hr.0&quot; },
+			{ &quot;data&quot;: &quot;office&quot; },
+			{ &quot;data&quot;: &quot;extn&quot; },
+			{ &quot;data&quot;: &quot;hr.2&quot; },
+			{ &quot;data&quot;: &quot;hr.1&quot; }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
 			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Ajax</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li class="active">
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
 			</div>
 		</div>
-	</body>
+	</section>
+</body>
 </html>

examples/ajax/orthogonal-data.html

@@ -0,0 +1,475 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Orthogonal data</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+$(document).ready(function() {
+	$('#example').DataTable( {
+		ajax: "data/orthogonal.txt",
+		columns: [
+			{ data: "name" },
+			{ data: "position" },
+			{ data: "office" },
+			{ data: "extn" },
+			{ data: {
+				_:    "start_date.display",
+				sort: "start_date.timestamp"
+			} },
+			{ data: "salary" }
+		]
+	} );
+} );
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Orthogonal data</span></h1>
+			<div class="info">
+				<p>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.</p>
+				<p>This can be done quite simply by using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
+				"DataTables initialisation option">columns.data</code></a> option which you use to tell DataTables which property to use from the data source object for each
+				column.</p>
+				<p>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:</p>
+				<pre><code class="multiline">{
+	"name":	   "Tiger Nixon",
+	"position":   "System Architect",
+	"salary":	 "$3,120",
+	"start_date": {
+		"display": "Mon 25th Apr 11",
+		"timestamp": "1303682400"
+	},
+	"office":	 "Edinburgh",
+	"extn":	   "5421"
+}
+</code></pre>
+			</div>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable( {
+		ajax: &quot;data/orthogonal.txt&quot;,
+		columns: [
+			{ data: &quot;name&quot; },
+			{ data: &quot;position&quot; },
+			{ data: &quot;office&quot; },
+			{ data: &quot;extn&quot; },
+			{ data: {
+				_:    &quot;start_date.display&quot;,
+				sort: &quot;start_date.timestamp&quot;
+			} },
+			{ data: &quot;salary&quot; }
+		]
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Ajax</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li class="active">
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/ajax/simple.html

@@ -0,0 +1,454 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Ajax data source (arrays)</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"ajax": "data/arrays.txt"
+	} );
+} );
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Ajax data source (arrays)</span></h1>
+			<div class="info">
+				<p>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 <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option to the address of the
+				JSON data source.</p>
+				<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option also allows for more
+				advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
+				"DataTables initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for further information.</p>
+				<p>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 may use the <a href=
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, shown in other
+				examples).</p>
+				<p>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:</p>
+				<pre><code class="multiline">[
+	"Tiger Nixon",
+	"System Architect",
+	"Edinburgh",
+	"5421",
+	"2011/04/25",
+	"$3,120"
+]
+</code></pre>
+				<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
+			</div>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable( {
+		&quot;ajax&quot;: &quot;data/arrays.txt&quot;
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Ajax</a></h3>
+						<ul class="toc active">
+							<li class="active">
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/ajax/sources/array_only.txt

@@ -1,59 +0,0 @@
-[
-	["Trident","Internet Explorer 4.0","Win 95+","4","X"],
-	["Trident","Internet Explorer 5.0","Win 95+","5","C"],
-	["Trident","Internet Explorer 5.5","Win 95+","5.5","A"],
-	["Trident","Internet Explorer 6","Win 98+","6","A"],
-	["Trident","Internet Explorer 7","Win XP SP2+","7","A"],
-	["Trident","AOL browser (AOL desktop)","Win XP","6","A"],
-	["Gecko","Firefox 1.0","Win 98+ / OSX.2+","1.7","A"],
-	["Gecko","Firefox 1.5","Win 98+ / OSX.2+","1.8","A"],
-	["Gecko","Firefox 2.0","Win 98+ / OSX.2+","1.8","A"],
-	["Gecko","Firefox 3.0","Win 2k+ / OSX.3+","1.9","A"],
-	["Gecko","Camino 1.0","OSX.2+","1.8","A"],
-	["Gecko","Camino 1.5","OSX.3+","1.8","A"],
-	["Gecko","Netscape 7.2","Win 95+ / Mac OS 8.6-9.2","1.7","A"],
-	["Gecko","Netscape Browser 8","Win 98SE+","1.7","A"],
-	["Gecko","Netscape Navigator 9","Win 98+ / OSX.2+","1.8","A"],
-	["Gecko","Mozilla 1.0","Win 95+ / OSX.1+",1,"A"],
-	["Gecko","Mozilla 1.1","Win 95+ / OSX.1+",1.1,"A"],
-	["Gecko","Mozilla 1.2","Win 95+ / OSX.1+",1.2,"A"],
-	["Gecko","Mozilla 1.3","Win 95+ / OSX.1+",1.3,"A"],
-	["Gecko","Mozilla 1.4","Win 95+ / OSX.1+",1.4,"A"],
-	["Gecko","Mozilla 1.5","Win 95+ / OSX.1+",1.5,"A"],
-	["Gecko","Mozilla 1.6","Win 95+ / OSX.1+",1.6,"A"],
-	["Gecko","Mozilla 1.7","Win 98+ / OSX.1+",1.7,"A"],
-	["Gecko","Mozilla 1.8","Win 98+ / OSX.1+",1.8,"A"],
-	["Gecko","Seamonkey 1.1","Win 98+ / OSX.2+","1.8","A"],
-	["Gecko","Epiphany 2.20","Gnome","1.8","A"],
-	["Webkit","Safari 1.2","OSX.3","125.5","A"],
-	["Webkit","Safari 1.3","OSX.3","312.8","A"],
-	["Webkit","Safari 2.0","OSX.4+","419.3","A"],
-	["Webkit","Safari 3.0","OSX.4+","522.1","A"],
-	["Webkit","OmniWeb 5.5","OSX.4+","420","A"],
-	["Webkit","iPod Touch / iPhone","iPod","420.1","A"],
-	["Webkit","S60","S60","413","A"],
-	["Presto","Opera 7.0","Win 95+ / OSX.1+","-","A"],
-	["Presto","Opera 7.5","Win 95+ / OSX.2+","-","A"],
-	["Presto","Opera 8.0","Win 95+ / OSX.2+","-","A"],
-	["Presto","Opera 8.5","Win 95+ / OSX.2+","-","A"],
-	["Presto","Opera 9.0","Win 95+ / OSX.3+","-","A"],
-	["Presto","Opera 9.2","Win 88+ / OSX.3+","-","A"],
-	["Presto","Opera 9.5","Win 88+ / OSX.3+","-","A"],
-	["Presto","Opera for Wii","Wii","-","A"],
-	["Presto","Nokia N800","N800","-","A"],
-	["Presto","Nintendo DS browser","Nintendo DS","8.5","C/A<sup>1</sup>"],
-	["KHTML","Konqureror 3.1","KDE 3.1","3.1","C"],
-	["KHTML","Konqureror 3.3","KDE 3.3","3.3","A"],
-	["KHTML","Konqureror 3.5","KDE 3.5","3.5","A"],
-	["Tasman","Internet Explorer 4.5","Mac OS 8-9","-","X"],
-	["Tasman","Internet Explorer 5.1","Mac OS 7.6-9","1","C"],
-	["Tasman","Internet Explorer 5.2","Mac OS 8-X","1","C"],
-	["Misc","NetFront 3.1","Embedded devices","-","C"],
-	["Misc","NetFront 3.4","Embedded devices","-","A"],
-	["Misc","Dillo 0.8","Embedded devices","-","X"],
-	["Misc","Links","Text only","-","X"],
-	["Misc","Lynx","Text only","-","X"],
-	["Misc","IE Mobile","Windows Mobile 6","-","C"],
-	["Misc","PSP browser","PSP","-","C"],
-	["Other browsers","All others","-","-","U"]
-]

examples/ajax/sources/arrays.txt

@@ -1,59 +0,0 @@
-{ "aaData": [
-	["Trident","Internet Explorer 4.0","Win 95+","4","X"],
-	["Trident","Internet Explorer 5.0","Win 95+","5","C"],
-	["Trident","Internet Explorer 5.5","Win 95+","5.5","A"],
-	["Trident","Internet Explorer 6","Win 98+","6","A"],
-	["Trident","Internet Explorer 7","Win XP SP2+","7","A"],
-	["Trident","AOL browser (AOL desktop)","Win XP","6","A"],
-	["Gecko","Firefox 1.0","Win 98+ / OSX.2+","1.7","A"],
-	["Gecko","Firefox 1.5","Win 98+ / OSX.2+","1.8","A"],
-	["Gecko","Firefox 2.0","Win 98+ / OSX.2+","1.8","A"],
-	["Gecko","Firefox 3.0","Win 2k+ / OSX.3+","1.9","A"],
-	["Gecko","Camino 1.0","OSX.2+","1.8","A"],
-	["Gecko","Camino 1.5","OSX.3+","1.8","A"],
-	["Gecko","Netscape 7.2","Win 95+ / Mac OS 8.6-9.2","1.7","A"],
-	["Gecko","Netscape Browser 8","Win 98SE+","1.7","A"],
-	["Gecko","Netscape Navigator 9","Win 98+ / OSX.2+","1.8","A"],
-	["Gecko","Mozilla 1.0","Win 95+ / OSX.1+",1,"A"],
-	["Gecko","Mozilla 1.1","Win 95+ / OSX.1+",1.1,"A"],
-	["Gecko","Mozilla 1.2","Win 95+ / OSX.1+",1.2,"A"],
-	["Gecko","Mozilla 1.3","Win 95+ / OSX.1+",1.3,"A"],
-	["Gecko","Mozilla 1.4","Win 95+ / OSX.1+",1.4,"A"],
-	["Gecko","Mozilla 1.5","Win 95+ / OSX.1+",1.5,"A"],
-	["Gecko","Mozilla 1.6","Win 95+ / OSX.1+",1.6,"A"],
-	["Gecko","Mozilla 1.7","Win 98+ / OSX.1+",1.7,"A"],
-	["Gecko","Mozilla 1.8","Win 98+ / OSX.1+",1.8,"A"],
-	["Gecko","Seamonkey 1.1","Win 98+ / OSX.2+","1.8","A"],
-	["Gecko","Epiphany 2.20","Gnome","1.8","A"],
-	["Webkit","Safari 1.2","OSX.3","125.5","A"],
-	["Webkit","Safari 1.3","OSX.3","312.8","A"],
-	["Webkit","Safari 2.0","OSX.4+","419.3","A"],
-	["Webkit","Safari 3.0","OSX.4+","522.1","A"],
-	["Webkit","OmniWeb 5.5","OSX.4+","420","A"],
-	["Webkit","iPod Touch / iPhone","iPod","420.1","A"],
-	["Webkit","S60","S60","413","A"],
-	["Presto","Opera 7.0","Win 95+ / OSX.1+","-","A"],
-	["Presto","Opera 7.5","Win 95+ / OSX.2+","-","A"],
-	["Presto","Opera 8.0","Win 95+ / OSX.2+","-","A"],
-	["Presto","Opera 8.5","Win 95+ / OSX.2+","-","A"],
-	["Presto","Opera 9.0","Win 95+ / OSX.3+","-","A"],
-	["Presto","Opera 9.2","Win 88+ / OSX.3+","-","A"],
-	["Presto","Opera 9.5","Win 88+ / OSX.3+","-","A"],
-	["Presto","Opera for Wii","Wii","-","A"],
-	["Presto","Nokia N800","N800","-","A"],
-	["Presto","Nintendo DS browser","Nintendo DS","8.5","C/A<sup>1</sup>"],
-	["KHTML","Konqureror 3.1","KDE 3.1","3.1","C"],
-	["KHTML","Konqureror 3.3","KDE 3.3","3.3","A"],
-	["KHTML","Konqureror 3.5","KDE 3.5","3.5","A"],
-	["Tasman","Internet Explorer 4.5","Mac OS 8-9","-","X"],
-	["Tasman","Internet Explorer 5.1","Mac OS 7.6-9","1","C"],
-	["Tasman","Internet Explorer 5.2","Mac OS 8-X","1","C"],
-	["Misc","NetFront 3.1","Embedded devices","-","C"],
-	["Misc","NetFront 3.4","Embedded devices","-","A"],
-	["Misc","Dillo 0.8","Embedded devices","-","X"],
-	["Misc","Links","Text only","-","X"],
-	["Misc","Lynx","Text only","-","X"],
-	["Misc","IE Mobile","Windows Mobile 6","-","C"],
-	["Misc","PSP browser","PSP","-","C"],
-	["Other browsers","All others","-","-","U"]
-] }

examples/ajax/sources/arrays_subobjects.txt

@@ -1,515 +0,0 @@
-{ "aaData": [
-	[
-		"Trident",
-		"Internet Explorer 4.0",
-		"Win 95+",
-		{
-			"version": "4",
-			"grade": "X"
-		}
-	],
-	[
-		"Trident",
-		"Internet Explorer 5.0",
-		"Win 95+",
-		{
-			"version": "5",
-			"grade": "C"
-		}
-	],
-	[
-		"Trident",
-		"Internet Explorer 5.5",
-		"Win 95+",
-		{
-			"version": "5.5",
-			"grade": "A"
-		}
-	],
-	[
-		"Trident",
-		"Internet Explorer 6",
-		"Win 98+",
-		{
-			"version": "6",
-			"grade": "A"
-		}
-	],
-	[
-		"Trident",
-		"Internet Explorer 7",
-		"Win XP SP2+",
-		{
-			"version": "7",
-			"grade": "A"
-		}
-	],
-	[
-		"Trident",
-		"AOL browser (AOL desktop)",
-		"Win XP",
-		{
-			"version": "6",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Firefox 1.0",
-		"Win 98+ / OSX.2+",
-		{
-			"version": "1.7",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Firefox 1.5",
-		"Win 98+ / OSX.2+",
-		{
-			"version": "1.8",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Firefox 2.0",
-		"Win 98+ / OSX.2+",
-		{
-			"version": "1.8",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Firefox 3.0",
-		"Win 2k+ / OSX.3+",
-		{
-			"version": "1.9",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Camino 1.0",
-		"OSX.2+",
-		{
-			"version": "1.8",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Camino 1.5",
-		"OSX.3+",
-		{
-			"version": "1.8",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Netscape 7.2",
-		"Win 95+ / Mac OS 8.6-9.2",
-		{
-			"version": "1.7",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Netscape Browser 8",
-		"Win 98SE+",
-		{
-			"version": "1.7",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Netscape Navigator 9",
-		"Win 98+ / OSX.2+",
-		{
-			"version": "1.8",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Mozilla 1.0",
-		"Win 95+ / OSX.1+",
-		{
-			"version": "1",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Mozilla 1.1",
-		"Win 95+ / OSX.1+",
-		{
-			"version": "1.1",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Mozilla 1.2",
-		"Win 95+ / OSX.1+",
-		{
-			"version": "1.2",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Mozilla 1.3",
-		"Win 95+ / OSX.1+",
-		{
-			"version": "1.3",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Mozilla 1.4",
-		"Win 95+ / OSX.1+",
-		{
-			"version": "1.4",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Mozilla 1.5",
-		"Win 95+ / OSX.1+",
-		{
-			"version": "1.5",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Mozilla 1.6",
-		"Win 95+ / OSX.1+",
-		{
-			"version": "1.6",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Mozilla 1.7",
-		"Win 98+ / OSX.1+",
-		{
-			"version": "1.7",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Mozilla 1.8",
-		"Win 98+ / OSX.1+",
-		{
-			"version": "1.8",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Seamonkey 1.1",
-		"Win 98+ / OSX.2+",
-		{
-			"version": "1.8",
-			"grade": "A"
-		}
-	],
-	[
-		"Gecko",
-		"Epiphany 2.20",
-		"Gnome",
-		{
-			"version": "1.8",
-			"grade": "A"
-		}
-	],
-	[
-		"Webkit",
-		"Safari 1.2",
-		"OSX.3",
-		{
-			"version": "125.5",
-			"grade": "A"
-		}
-	],
-	[
-		"Webkit",
-		"Safari 1.3",
-		"OSX.3",
-		{
-			"version": "312.8",
-			"grade": "A"
-		}
-	],
-	[
-		"Webkit",
-		"Safari 2.0",
-		"OSX.4+",
-		{
-			"version": "419.3",
-			"grade": "A"
-		}
-	],
-	[
-		"Webkit",
-		"Safari 3.0",
-		"OSX.4+",
-		{
-			"version": "522.1",
-			"grade": "A"
-		}
-	],
-	[
-		"Webkit",
-		"OmniWeb 5.5",
-		"OSX.4+",
-		{
-			"version": "420",
-			"grade": "A"
-		}
-	],
-	[
-		"Webkit",
-		"iPod Touch / iPhone",
-		"iPod",
-		{
-			"version": "420.1",
-			"grade": "A"
-		}
-	],
-	[
-		"Webkit",
-		"S60",
-		"S60",
-		{
-			"version": "413",
-			"grade": "A"
-		}
-	],
-	[
-		"Presto",
-		"Opera 7.0",
-		"Win 95+ / OSX.1+",
-		{
-			"version": "-",
-			"grade": "A"
-		}
-	],
-	[
-		"Presto",
-		"Opera 7.5",
-		"Win 95+ / OSX.2+",
-		{
-			"version": "-",
-			"grade": "A"
-		}
-	],
-	[
-		"Presto",
-		"Opera 8.0",
-		"Win 95+ / OSX.2+",
-		{
-			"version": "-",
-			"grade": "A"
-		}
-	],
-	[
-		"Presto",
-		"Opera 8.5",
-		"Win 95+ / OSX.2+",
-		{
-			"version": "-",
-			"grade": "A"
-		}
-	],
-	[
-		"Presto",
-		"Opera 9.0",
-		"Win 95+ / OSX.3+",
-		{
-			"version": "-",
-			"grade": "A"
-		}
-	],
-	[
-		"Presto",
-		"Opera 9.2",
-		"Win 88+ / OSX.3+",
-		{
-			"version": "-",
-			"grade": "A"
-		}
-	],
-	[
-		"Presto",
-		"Opera 9.5",
-		"Win 88+ / OSX.3+",
-		{
-			"version": "-",
-			"grade": "A"
-		}
-	],
-	[
-		"Presto",
-		"Opera for Wii",
-		"Wii",
-		{
-			"version": "-",
-			"grade": "A"
-		}
-	],
-	[
-		"Presto",
-		"Nokia N800",
-		"N800",
-		{
-			"version": "-",
-			"grade": "A"
-		}
-	],
-	[
-		"Presto",
-		"Nintendo DS browser",
-		"Nintendo DS",
-		{
-			"version": "8.5",
-			"grade": "C/A<sup>1</sup>"
-		}
-	],
-	[
-		"KHTML",
-		"Konqureror 3.1",
-		"KDE 3.1",
-		{
-			"version": "3.1",
-			"grade": "C"
-		}
-	],
-	[
-		"KHTML",
-		"Konqureror 3.3",
-		"KDE 3.3",
-		{
-			"version": "3.3",
-			"grade": "A"
-		}
-	],
-	[
-		"KHTML",
-		"Konqureror 3.5",
-		"KDE 3.5",
-		{
-			"version": "3.5",
-			"grade": "A"
-		}
-	],
-	[
-		"Tasman",
-		"Internet Explorer 4.5",
-		"Mac OS 8-9",
-		{
-			"version": "-",
-			"grade": "X"
-		}
-	],
-	[
-		"Tasman",
-		"Internet Explorer 5.1",
-		"Mac OS 7.6-9",
-		{
-			"version": "1",
-			"grade": "C"
-		}
-	],
-	[
-		"Tasman",
-		"Internet Explorer 5.2",
-		"Mac OS 8-X",
-		{
-			"version": "1",
-			"grade": "C"
-		}
-	],
-	[
-		"Misc",
-		"NetFront 3.1",
-		"Embedded devices",
-		{
-			"version": "-",
-			"grade": "C"
-		}
-	],
-	[
-		"Misc",
-		"NetFront 3.4",
-		"Embedded devices",
-		{
-			"version": "-",
-			"grade": "A"
-		}
-	],
-	[
-		"Misc",
-		"Dillo 0.8",
-		"Embedded devices",
-		{
-			"version": "-",
-			"grade": "X"
-		}
-	],
-	[
-		"Misc",
-		"Links",
-		"Text only",
-		{
-			"version": "-",
-			"grade": "X"
-		}
-	],
-	[
-		"Misc",
-		"Lynx",
-		"Text only",
-		{
-			"version": "-",
-			"grade": "X"
-		}
-	],
-	[
-		"Misc",
-		"IE Mobile",
-		"Windows Mobile 6",
-		{
-			"version": "-",
-			"grade": "C"
-		}
-	],
-	[
-		"Misc",
-		"PSP browser",
-		"PSP",
-		{
-			"version": "-",
-			"grade": "C"
-		}
-	],
-	[
-		"Other browsers",
-		"All others",
-		"-",
-		{
-			"version": "-",
-			"grade": "U"
-		}
-	]
-] }

examples/ajax/sources/custom_prop.txt

@@ -1,59 +0,0 @@
-{ "demo": [
-	["Trident","Internet Explorer 4.0","Win 95+","4","X"],
-	["Trident","Internet Explorer 5.0","Win 95+","5","C"],
-	["Trident","Internet Explorer 5.5","Win 95+","5.5","A"],
-	["Trident","Internet Explorer 6","Win 98+","6","A"],
-	["Trident","Internet Explorer 7","Win XP SP2+","7","A"],
-	["Trident","AOL browser (AOL desktop)","Win XP","6","A"],
-	["Gecko","Firefox 1.0","Win 98+ / OSX.2+","1.7","A"],
-	["Gecko","Firefox 1.5","Win 98+ / OSX.2+","1.8","A"],
-	["Gecko","Firefox 2.0","Win 98+ / OSX.2+","1.8","A"],
-	["Gecko","Firefox 3.0","Win 2k+ / OSX.3+","1.9","A"],
-	["Gecko","Camino 1.0","OSX.2+","1.8","A"],
-	["Gecko","Camino 1.5","OSX.3+","1.8","A"],
-	["Gecko","Netscape 7.2","Win 95+ / Mac OS 8.6-9.2","1.7","A"],
-	["Gecko","Netscape Browser 8","Win 98SE+","1.7","A"],
-	["Gecko","Netscape Navigator 9","Win 98+ / OSX.2+","1.8","A"],
-	["Gecko","Mozilla 1.0","Win 95+ / OSX.1+",1,"A"],
-	["Gecko","Mozilla 1.1","Win 95+ / OSX.1+",1.1,"A"],
-	["Gecko","Mozilla 1.2","Win 95+ / OSX.1+",1.2,"A"],
-	["Gecko","Mozilla 1.3","Win 95+ / OSX.1+",1.3,"A"],
-	["Gecko","Mozilla 1.4","Win 95+ / OSX.1+",1.4,"A"],
-	["Gecko","Mozilla 1.5","Win 95+ / OSX.1+",1.5,"A"],
-	["Gecko","Mozilla 1.6","Win 95+ / OSX.1+",1.6,"A"],
-	["Gecko","Mozilla 1.7","Win 98+ / OSX.1+",1.7,"A"],
-	["Gecko","Mozilla 1.8","Win 98+ / OSX.1+",1.8,"A"],
-	["Gecko","Seamonkey 1.1","Win 98+ / OSX.2+","1.8","A"],
-	["Gecko","Epiphany 2.20","Gnome","1.8","A"],
-	["Webkit","Safari 1.2","OSX.3","125.5","A"],
-	["Webkit","Safari 1.3","OSX.3","312.8","A"],
-	["Webkit","Safari 2.0","OSX.4+","419.3","A"],
-	["Webkit","Safari 3.0","OSX.4+","522.1","A"],
-	["Webkit","OmniWeb 5.5","OSX.4+","420","A"],
-	["Webkit","iPod Touch / iPhone","iPod","420.1","A"],
-	["Webkit","S60","S60","413","A"],
-	["Presto","Opera 7.0","Win 95+ / OSX.1+","-","A"],
-	["Presto","Opera 7.5","Win 95+ / OSX.2+","-","A"],
-	["Presto","Opera 8.0","Win 95+ / OSX.2+","-","A"],
-	["Presto","Opera 8.5","Win 95+ / OSX.2+","-","A"],
-	["Presto","Opera 9.0","Win 95+ / OSX.3+","-","A"],
-	["Presto","Opera 9.2","Win 88+ / OSX.3+","-","A"],
-	["Presto","Opera 9.5","Win 88+ / OSX.3+","-","A"],
-	["Presto","Opera for Wii","Wii","-","A"],
-	["Presto","Nokia N800","N800","-","A"],
-	["Presto","Nintendo DS browser","Nintendo DS","8.5","C/A<sup>1</sup>"],
-	["KHTML","Konqureror 3.1","KDE 3.1","3.1","C"],
-	["KHTML","Konqureror 3.3","KDE 3.3","3.3","A"],
-	["KHTML","Konqureror 3.5","KDE 3.5","3.5","A"],
-	["Tasman","Internet Explorer 4.5","Mac OS 8-9","-","X"],
-	["Tasman","Internet Explorer 5.1","Mac OS 7.6-9","1","C"],
-	["Tasman","Internet Explorer 5.2","Mac OS 8-X","1","C"],
-	["Misc","NetFront 3.1","Embedded devices","-","C"],
-	["Misc","NetFront 3.4","Embedded devices","-","A"],
-	["Misc","Dillo 0.8","Embedded devices","-","X"],
-	["Misc","Links","Text only","-","X"],
-	["Misc","Lynx","Text only","-","X"],
-	["Misc","IE Mobile","Windows Mobile 6","-","C"],
-	["Misc","PSP browser","PSP","-","C"],
-	["Other browsers","All others","-","-","U"]
-] }

examples/ajax/sources/deep.txt

@@ -1,629 +0,0 @@
-{ "aaData": [
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 4.0",
-		"platform": {
-			"inner": "Win 95+",
-			"details": [
-				"4",
-				"X"
-			]
-		}
-	},
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 5.0",
-		"platform": {
-			"inner": "Win 95+",
-			"details": [
-				"5",
-				"C"
-			]
-		}
-	},
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 5.5",
-		"platform": {
-			"inner": "Win 95+",
-			"details": [
-				"5.5",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 6",
-		"platform": {
-			"inner": "Win 98+",
-			"details": [
-				"6",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 7",
-		"platform": {
-			"inner": "Win XP SP2+",
-			"details": [
-				"7",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Trident",
-		"browser": "AOL browser (AOL desktop)",
-		"platform": {
-			"inner": "Win XP",
-			"details": [
-				"6",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Firefox 1.0",
-		"platform": {
-			"inner": "Win 98+ / OSX.2+",
-			"details": [
-				"1.7",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Firefox 1.5",
-		"platform": {
-			"inner": "Win 98+ / OSX.2+",
-			"details": [
-				"1.8",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Firefox 2.0",
-		"platform": {
-			"inner": "Win 98+ / OSX.2+",
-			"details": [
-				"1.8",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Firefox 3.0",
-		"platform": {
-			"inner": "Win 2k+ / OSX.3+",
-			"details": [
-				"1.9",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Camino 1.0",
-		"platform": {
-			"inner": "OSX.2+",
-			"details": [
-				"1.8",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Camino 1.5",
-		"platform": {
-			"inner": "OSX.3+",
-			"details": [
-				"1.8",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Netscape 7.2",
-		"platform": {
-			"inner": "Win 95+ / Mac OS 8.6-9.2",
-			"details": [
-				"1.7",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Netscape Browser 8",
-		"platform": {
-			"inner": "Win 98SE+",
-			"details": [
-				"1.7",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Netscape Navigator 9",
-		"platform": {
-			"inner": "Win 98+ / OSX.2+",
-			"details": [
-				"1.8",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.0",
-		"platform": {
-			"inner": "Win 95+ / OSX.1+",
-			"details": [
-				1,
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.1",
-		"platform": {
-			"inner": "Win 95+ / OSX.1+",
-			"details": [
-				1.1,
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.2",
-		"platform": {
-			"inner": "Win 95+ / OSX.1+",
-			"details": [
-				1.2,
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.3",
-		"platform": {
-			"inner": "Win 95+ / OSX.1+",
-			"details": [
-				1.3,
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.4",
-		"platform": {
-			"inner": "Win 95+ / OSX.1+",
-			"details": [
-				1.4,
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.5",
-		"platform": {
-			"inner": "Win 95+ / OSX.1+",
-			"details": [
-				1.5,
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.6",
-		"platform": {
-			"inner": "Win 95+ / OSX.1+",
-			"details": [
-				1.6,
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.7",
-		"platform": {
-			"inner": "Win 98+ / OSX.1+",
-			"details": [
-				1.7,
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.8",
-		"platform": {
-			"inner": "Win 98+ / OSX.1+",
-			"details": [
-				1.8,
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Seamonkey 1.1",
-		"platform": {
-			"inner": "Win 98+ / OSX.2+",
-			"details": [
-				"1.8",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Epiphany 2.20",
-		"platform": {
-			"inner": "Gnome",
-			"details": [
-				"1.8",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Webkit",
-		"browser": "Safari 1.2",
-		"platform": {
-			"inner": "OSX.3",
-			"details": [
-				"125.5",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Webkit",
-		"browser": "Safari 1.3",
-		"platform": {
-			"inner": "OSX.3",
-			"details": [
-				"312.8",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Webkit",
-		"browser": "Safari 2.0",
-		"platform": {
-			"inner": "OSX.4+",
-			"details": [
-				"419.3",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Webkit",
-		"browser": "Safari 3.0",
-		"platform": {
-			"inner": "OSX.4+",
-			"details": [
-				"522.1",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Webkit",
-		"browser": "OmniWeb 5.5",
-		"platform": {
-			"inner": "OSX.4+",
-			"details": [
-				"420",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Webkit",
-		"browser": "iPod Touch / iPhone",
-		"platform": {
-			"inner": "iPod",
-			"details": [
-				"420.1",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Webkit",
-		"browser": "S60",
-		"platform": {
-			"inner": "S60",
-			"details": [
-				"413",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 7.0",
-		"platform": {
-			"inner": "Win 95+ / OSX.1+",
-			"details": [
-				"-",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 7.5",
-		"platform": {
-			"inner": "Win 95+ / OSX.2+",
-			"details": [
-				"-",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 8.0",
-		"platform": {
-			"inner": "Win 95+ / OSX.2+",
-			"details": [
-				"-",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 8.5",
-		"platform": {
-			"inner": "Win 95+ / OSX.2+",
-			"details": [
-				"-",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 9.0",
-		"platform": {
-			"inner": "Win 95+ / OSX.3+",
-			"details": [
-				"-",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 9.2",
-		"platform": {
-			"inner": "Win 88+ / OSX.3+",
-			"details": [
-				"-",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 9.5",
-		"platform": {
-			"inner": "Win 88+ / OSX.3+",
-			"details": [
-				"-",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera for Wii",
-		"platform": {
-			"inner": "Wii",
-			"details": [
-				"-",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Presto",
-		"browser": "Nokia N800",
-		"platform": {
-			"inner": "N800",
-			"details": [
-				"-",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Presto",
-		"browser": "Nintendo DS browser",
-		"platform": {
-			"inner": "Nintendo DS",
-			"details": [
-				"8.5",
-				"C/A<sup>1</sup>"
-			]
-		}
-	},
-	{
-		"engine": "KHTML",
-		"browser": "Konqureror 3.1",
-		"platform": {
-			"inner": "KDE 3.1",
-			"details": [
-				"3.1",
-				"C"
-			]
-		}
-	},
-	{
-		"engine": "KHTML",
-		"browser": "Konqureror 3.3",
-		"platform": {
-			"inner": "KDE 3.3",
-			"details": [
-				"3.3",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "KHTML",
-		"browser": "Konqureror 3.5",
-		"platform": {
-			"inner": "KDE 3.5",
-			"details": [
-				"3.5",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Tasman",
-		"browser": "Internet Explorer 4.5",
-		"platform": {
-			"inner": "Mac OS 8-9",
-			"details": [
-				"-",
-				"X"
-			]
-		}
-	},
-	{
-		"engine": "Tasman",
-		"browser": "Internet Explorer 5.1",
-		"platform": {
-			"inner": "Mac OS 7.6-9",
-			"details": [
-				"1",
-				"C"
-			]
-		}
-	},
-	{
-		"engine": "Tasman",
-		"browser": "Internet Explorer 5.2",
-		"platform": {
-			"inner": "Mac OS 8-X",
-			"details": [
-				"1",
-				"C"
-			]
-		}
-	},
-	{
-		"engine": "Misc",
-		"browser": "NetFront 3.1",
-		"platform": {
-			"inner": "Embedded devices",
-			"details": [
-				"-",
-				"C"
-			]
-		}
-	},
-	{
-		"engine": "Misc",
-		"browser": "NetFront 3.4",
-		"platform": {
-			"inner": "Embedded devices",
-			"details": [
-				"-",
-				"A"
-			]
-		}
-	},
-	{
-		"engine": "Misc",
-		"browser": "Dillo 0.8",
-		"platform": {
-			"inner": "Embedded devices",
-			"details": [
-				"-",
-				"X"
-			]
-		}
-	},
-	{
-		"engine": "Misc",
-		"browser": "Links",
-		"platform": {
-			"inner": "Text only",
-			"details": [
-				"-",
-				"X"
-			]
-		}
-	},
-	{
-		"engine": "Misc",
-		"browser": "Lynx",
-		"platform": {
-			"inner": "Text only",
-			"details": [
-				"-",
-				"X"
-			]
-		}
-	},
-	{
-		"engine": "Misc",
-		"browser": "IE Mobile",
-		"platform": {
-			"inner": "Windows Mobile 6",
-			"details": [
-				"-",
-				"C"
-			]
-		}
-	},
-	{
-		"engine": "Misc",
-		"browser": "PSP browser",
-		"platform": {
-			"inner": "PSP",
-			"details": [
-				"-",
-				"C"
-			]
-		}
-	},
-	{
-		"engine": "Other browsers",
-		"browser": "All others",
-		"platform": {
-			"inner": "-",
-			"details": [
-				"-",
-				"U"
-			]
-		}
-	}
-] }

examples/ajax/sources/objects.txt

@@ -1,401 +0,0 @@
-{ "aaData": [
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 4.0",
-		"platform": "Win 95+",
-		"version": "4",
-		"grade": "X"
-	},
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 5.0",
-		"platform": "Win 95+",
-		"version": "5",
-		"grade": "C"
-	},
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 5.5",
-		"platform": "Win 95+",
-		"version": "5.5",
-		"grade": "A"
-	},
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 6",
-		"platform": "Win 98+",
-		"version": "6",
-		"grade": "A"
-	},
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 7",
-		"platform": "Win XP SP2+",
-		"version": "7",
-		"grade": "A"
-	},
-	{
-		"engine": "Trident",
-		"browser": "AOL browser (AOL desktop)",
-		"platform": "Win XP",
-		"version": "6",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Firefox 1.0",
-		"platform": "Win 98+ / OSX.2+",
-		"version": "1.7",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Firefox 1.5",
-		"platform": "Win 98+ / OSX.2+",
-		"version": "1.8",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Firefox 2.0",
-		"platform": "Win 98+ / OSX.2+",
-		"version": "1.8",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Firefox 3.0",
-		"platform": "Win 2k+ / OSX.3+",
-		"version": "1.9",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Camino 1.0",
-		"platform": "OSX.2+",
-		"version": "1.8",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Camino 1.5",
-		"platform": "OSX.3+",
-		"version": "1.8",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Netscape 7.2",
-		"platform": "Win 95+ / Mac OS 8.6-9.2",
-		"version": "1.7",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Netscape Browser 8",
-		"platform": "Win 98SE+",
-		"version": "1.7",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Netscape Navigator 9",
-		"platform": "Win 98+ / OSX.2+",
-		"version": "1.8",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.0",
-		"platform": "Win 95+ / OSX.1+",
-		"version": "1",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.1",
-		"platform": "Win 95+ / OSX.1+",
-		"version": "1.1",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.2",
-		"platform": "Win 95+ / OSX.1+",
-		"version": "1.2",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.3",
-		"platform": "Win 95+ / OSX.1+",
-		"version": "1.3",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.4",
-		"platform": "Win 95+ / OSX.1+",
-		"version": "1.4",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.5",
-		"platform": "Win 95+ / OSX.1+",
-		"version": "1.5",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.6",
-		"platform": "Win 95+ / OSX.1+",
-		"version": "1.6",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.7",
-		"platform": "Win 98+ / OSX.1+",
-		"version": "1.7",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.8",
-		"platform": "Win 98+ / OSX.1+",
-		"version": "1.8",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Seamonkey 1.1",
-		"platform": "Win 98+ / OSX.2+",
-		"version": "1.8",
-		"grade": "A"
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Epiphany 2.20",
-		"platform": "Gnome",
-		"version": "1.8",
-		"grade": "A"
-	},
-	{
-		"engine": "Webkit",
-		"browser": "Safari 1.2",
-		"platform": "OSX.3",
-		"version": "125.5",
-		"grade": "A"
-	},
-	{
-		"engine": "Webkit",
-		"browser": "Safari 1.3",
-		"platform": "OSX.3",
-		"version": "312.8",
-		"grade": "A"
-	},
-	{
-		"engine": "Webkit",
-		"browser": "Safari 2.0",
-		"platform": "OSX.4+",
-		"version": "419.3",
-		"grade": "A"
-	},
-	{
-		"engine": "Webkit",
-		"browser": "Safari 3.0",
-		"platform": "OSX.4+",
-		"version": "522.1",
-		"grade": "A"
-	},
-	{
-		"engine": "Webkit",
-		"browser": "OmniWeb 5.5",
-		"platform": "OSX.4+",
-		"version": "420",
-		"grade": "A"
-	},
-	{
-		"engine": "Webkit",
-		"browser": "iPod Touch / iPhone",
-		"platform": "iPod",
-		"version": "420.1",
-		"grade": "A"
-	},
-	{
-		"engine": "Webkit",
-		"browser": "S60",
-		"platform": "S60",
-		"version": "413",
-		"grade": "A"
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 7.0",
-		"platform": "Win 95+ / OSX.1+",
-		"version": "-",
-		"grade": "A"
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 7.5",
-		"platform": "Win 95+ / OSX.2+",
-		"version": "-",
-		"grade": "A"
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 8.0",
-		"platform": "Win 95+ / OSX.2+",
-		"version": "-",
-		"grade": "A"
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 8.5",
-		"platform": "Win 95+ / OSX.2+",
-		"version": "-",
-		"grade": "A"
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 9.0",
-		"platform": "Win 95+ / OSX.3+",
-		"version": "-",
-		"grade": "A"
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 9.2",
-		"platform": "Win 88+ / OSX.3+",
-		"version": "-",
-		"grade": "A"
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 9.5",
-		"platform": "Win 88+ / OSX.3+",
-		"version": "-",
-		"grade": "A"
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera for Wii",
-		"platform": "Wii",
-		"version": "-",
-		"grade": "A"
-	},
-	{
-		"engine": "Presto",
-		"browser": "Nokia N800",
-		"platform": "N800",
-		"version": "-",
-		"grade": "A"
-	},
-	{
-		"engine": "Presto",
-		"browser": "Nintendo DS browser",
-		"platform": "Nintendo DS",
-		"version": "8.5",
-		"grade": "C/A<sup>1</sup>"
-	},
-	{
-		"engine": "KHTML",
-		"browser": "Konqureror 3.1",
-		"platform": "KDE 3.1",
-		"version": "3.1",
-		"grade": "C"
-	},
-	{
-		"engine": "KHTML",
-		"browser": "Konqureror 3.3",
-		"platform": "KDE 3.3",
-		"version": "3.3",
-		"grade": "A"
-	},
-	{
-		"engine": "KHTML",
-		"browser": "Konqureror 3.5",
-		"platform": "KDE 3.5",
-		"version": "3.5",
-		"grade": "A"
-	},
-	{
-		"engine": "Tasman",
-		"browser": "Internet Explorer 4.5",
-		"platform": "Mac OS 8-9",
-		"version": "-",
-		"grade": "X"
-	},
-	{
-		"engine": "Tasman",
-		"browser": "Internet Explorer 5.1",
-		"platform": "Mac OS 7.6-9",
-		"version": "1",
-		"grade": "C"
-	},
-	{
-		"engine": "Tasman",
-		"browser": "Internet Explorer 5.2",
-		"platform": "Mac OS 8-X",
-		"version": "1",
-		"grade": "C"
-	},
-	{
-		"engine": "Misc",
-		"browser": "NetFront 3.1",
-		"platform": "Embedded devices",
-		"version": "-",
-		"grade": "C"
-	},
-	{
-		"engine": "Misc",
-		"browser": "NetFront 3.4",
-		"platform": "Embedded devices",
-		"version": "-",
-		"grade": "A"
-	},
-	{
-		"engine": "Misc",
-		"browser": "Dillo 0.8",
-		"platform": "Embedded devices",
-		"version": "-",
-		"grade": "X"
-	},
-	{
-		"engine": "Misc",
-		"browser": "Links",
-		"platform": "Text only",
-		"version": "-",
-		"grade": "X"
-	},
-	{
-		"engine": "Misc",
-		"browser": "Lynx",
-		"platform": "Text only",
-		"version": "-",
-		"grade": "X"
-	},
-	{
-		"engine": "Misc",
-		"browser": "IE Mobile",
-		"platform": "Windows Mobile 6",
-		"version": "-",
-		"grade": "C"
-	},
-	{
-		"engine": "Misc",
-		"browser": "PSP browser",
-		"platform": "PSP",
-		"version": "-",
-		"grade": "C"
-	},
-	{
-		"engine": "Other browsers",
-		"browser": "All others",
-		"platform": "-",
-		"version": "-",
-		"grade": "U"
-	}
-] }

examples/ajax/sources/objects_subarrays.txt

@@ -1,515 +0,0 @@
-{ "aaData": [
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 4.0",
-		"platform": "Win 95+",
-		"details": [
-			"4",
-			"X"
-		]
-	},
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 5.0",
-		"platform": "Win 95+",
-		"details": [
-			"5",
-			"C"
-		]
-	},
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 5.5",
-		"platform": "Win 95+",
-		"details": [
-			"5.5",
-			"A"
-		]
-	},
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 6",
-		"platform": "Win 98+",
-		"details": [
-			"6",
-			"A"
-		]
-	},
-	{
-		"engine": "Trident",
-		"browser": "Internet Explorer 7",
-		"platform": "Win XP SP2+",
-		"details": [
-			"7",
-			"A"
-		]
-	},
-	{
-		"engine": "Trident",
-		"browser": "AOL browser (AOL desktop)",
-		"platform": "Win XP",
-		"details": [
-			"6",
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Firefox 1.0",
-		"platform": "Win 98+ / OSX.2+",
-		"details": [
-			"1.7",
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Firefox 1.5",
-		"platform": "Win 98+ / OSX.2+",
-		"details": [
-			"1.8",
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Firefox 2.0",
-		"platform": "Win 98+ / OSX.2+",
-		"details": [
-			"1.8",
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Firefox 3.0",
-		"platform": "Win 2k+ / OSX.3+",
-		"details": [
-			"1.9",
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Camino 1.0",
-		"platform": "OSX.2+",
-		"details": [
-			"1.8",
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Camino 1.5",
-		"platform": "OSX.3+",
-		"details": [
-			"1.8",
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Netscape 7.2",
-		"platform": "Win 95+ / Mac OS 8.6-9.2",
-		"details": [
-			"1.7",
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Netscape Browser 8",
-		"platform": "Win 98SE+",
-		"details": [
-			"1.7",
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Netscape Navigator 9",
-		"platform": "Win 98+ / OSX.2+",
-		"details": [
-			"1.8",
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.0",
-		"platform": "Win 95+ / OSX.1+",
-		"details": [
-			1,
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.1",
-		"platform": "Win 95+ / OSX.1+",
-		"details": [
-			1.1,
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.2",
-		"platform": "Win 95+ / OSX.1+",
-		"details": [
-			1.2,
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.3",
-		"platform": "Win 95+ / OSX.1+",
-		"details": [
-			1.3,
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.4",
-		"platform": "Win 95+ / OSX.1+",
-		"details": [
-			1.4,
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.5",
-		"platform": "Win 95+ / OSX.1+",
-		"details": [
-			1.5,
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.6",
-		"platform": "Win 95+ / OSX.1+",
-		"details": [
-			1.6,
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.7",
-		"platform": "Win 98+ / OSX.1+",
-		"details": [
-			1.7,
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Mozilla 1.8",
-		"platform": "Win 98+ / OSX.1+",
-		"details": [
-			1.8,
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Seamonkey 1.1",
-		"platform": "Win 98+ / OSX.2+",
-		"details": [
-			"1.8",
-			"A"
-		]
-	},
-	{
-		"engine": "Gecko",
-		"browser": "Epiphany 2.20",
-		"platform": "Gnome",
-		"details": [
-			"1.8",
-			"A"
-		]
-	},
-	{
-		"engine": "Webkit",
-		"browser": "Safari 1.2",
-		"platform": "OSX.3",
-		"details": [
-			"125.5",
-			"A"
-		]
-	},
-	{
-		"engine": "Webkit",
-		"browser": "Safari 1.3",
-		"platform": "OSX.3",
-		"details": [
-			"312.8",
-			"A"
-		]
-	},
-	{
-		"engine": "Webkit",
-		"browser": "Safari 2.0",
-		"platform": "OSX.4+",
-		"details": [
-			"419.3",
-			"A"
-		]
-	},
-	{
-		"engine": "Webkit",
-		"browser": "Safari 3.0",
-		"platform": "OSX.4+",
-		"details": [
-			"522.1",
-			"A"
-		]
-	},
-	{
-		"engine": "Webkit",
-		"browser": "OmniWeb 5.5",
-		"platform": "OSX.4+",
-		"details": [
-			"420",
-			"A"
-		]
-	},
-	{
-		"engine": "Webkit",
-		"browser": "iPod Touch / iPhone",
-		"platform": "iPod",
-		"details": [
-			"420.1",
-			"A"
-		]
-	},
-	{
-		"engine": "Webkit",
-		"browser": "S60",
-		"platform": "S60",
-		"details": [
-			"413",
-			"A"
-		]
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 7.0",
-		"platform": "Win 95+ / OSX.1+",
-		"details": [
-			"-",
-			"A"
-		]
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 7.5",
-		"platform": "Win 95+ / OSX.2+",
-		"details": [
-			"-",
-			"A"
-		]
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 8.0",
-		"platform": "Win 95+ / OSX.2+",
-		"details": [
-			"-",
-			"A"
-		]
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 8.5",
-		"platform": "Win 95+ / OSX.2+",
-		"details": [
-			"-",
-			"A"
-		]
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 9.0",
-		"platform": "Win 95+ / OSX.3+",
-		"details": [
-			"-",
-			"A"
-		]
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 9.2",
-		"platform": "Win 88+ / OSX.3+",
-		"details": [
-			"-",
-			"A"
-		]
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera 9.5",
-		"platform": "Win 88+ / OSX.3+",
-		"details": [
-			"-",
-			"A"
-		]
-	},
-	{
-		"engine": "Presto",
-		"browser": "Opera for Wii",
-		"platform": "Wii",
-		"details": [
-			"-",
-			"A"
-		]
-	},
-	{
-		"engine": "Presto",
-		"browser": "Nokia N800",
-		"platform": "N800",
-		"details": [
-			"-",
-			"A"
-		]
-	},
-	{
-		"engine": "Presto",
-		"browser": "Nintendo DS browser",
-		"platform": "Nintendo DS",
-		"details": [
-			"8.5",
-			"C/A<sup>1</sup>"
-		]
-	},
-	{
-		"engine": "KHTML",
-		"browser": "Konqureror 3.1",
-		"platform": "KDE 3.1",
-		"details": [
-			"3.1",
-			"C"
-		]
-	},
-	{
-		"engine": "KHTML",
-		"browser": "Konqureror 3.3",
-		"platform": "KDE 3.3",
-		"details": [
-			"3.3",
-			"A"
-		]
-	},
-	{
-		"engine": "KHTML",
-		"browser": "Konqureror 3.5",
-		"platform": "KDE 3.5",
-		"details": [
-			"3.5",
-			"A"
-		]
-	},
-	{
-		"engine": "Tasman",
-		"browser": "Internet Explorer 4.5",
-		"platform": "Mac OS 8-9",
-		"details": [
-			"-",
-			"X"
-		]
-	},
-	{
-		"engine": "Tasman",
-		"browser": "Internet Explorer 5.1",
-		"platform": "Mac OS 7.6-9",
-		"details": [
-			"1",
-			"C"
-		]
-	},
-	{
-		"engine": "Tasman",
-		"browser": "Internet Explorer 5.2",
-		"platform": "Mac OS 8-X",
-		"details": [
-			"1",
-			"C"
-		]
-	},
-	{
-		"engine": "Misc",
-		"browser": "NetFront 3.1",
-		"platform": "Embedded devices",
-		"details": [
-			"-",
-			"C"
-		]
-	},
-	{
-		"engine": "Misc",
-		"browser": "NetFront 3.4",
-		"platform": "Embedded devices",
-		"details": [
-			"-",
-			"A"
-		]
-	},
-	{
-		"engine": "Misc",
-		"browser": "Dillo 0.8",
-		"platform": "Embedded devices",
-		"details": [
-			"-",
-			"X"
-		]
-	},
-	{
-		"engine": "Misc",
-		"browser": "Links",
-		"platform": "Text only",
-		"details": [
-			"-",
-			"X"
-		]
-	},
-	{
-		"engine": "Misc",
-		"browser": "Lynx",
-		"platform": "Text only",
-		"details": [
-			"-",
-			"X"
-		]
-	},
-	{
-		"engine": "Misc",
-		"browser": "IE Mobile",
-		"platform": "Windows Mobile 6",
-		"details": [
-			"-",
-			"C"
-		]
-	},
-	{
-		"engine": "Misc",
-		"browser": "PSP browser",
-		"platform": "PSP",
-		"details": [
-			"-",
-			"C"
-		]
-	},
-	{
-		"engine": "Other browsers",
-		"browser": "All others",
-		"platform": "-",
-		"details": [
-			"-",
-			"U"
-		]
-	}
-] }

examples/api/add_row.html

@@ -1,221 +1,474 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 <html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			/* Global var for counter */
-			var giCount = 1;
-			
-			$(document).ready(function() {
-				$('#example').dataTable();
-			} );
-			
-			function fnClickAddRow() {
-				$('#example').dataTable().fnAddData( [
-					giCount+".1",
-					giCount+".2",
-					giCount+".3",
-					giCount+".4" ] );
-				
-				giCount++;
-			}
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables add row example
-			</div>
-
-			<h1>Preamble</h1>
-			<p>DataTables adding rows in DataTables is done by assigning the DataTables jQuery object to a variable when initialising it, and then using it's API methods to add a new row. Deleting rows can be done in a similar manner.</p>
-			
-			<h1>Live example</h1>
-			<p><a href="javascript:void(0);" onclick="fnClickAddRow();">Click to add a new row</a></p>
-			
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th>Column 1</th>
-			<th>Column 2</th>
-			<th>Column 3</th>
-			<th>Column 4</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr>
-			<td>allan</td>
-			<td>allan</td>
-			<td>allan</td>
-			<td>allan</td>
-		</tr>
-	</tbody>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">/* Global var for counter */
-var giCount = 1;
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Add rows</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
 
 $(document).ready(function() {
-	$('#example').dataTable();
+	var t = $('#example').DataTable();
+	var counter = 1;
+
+	$('#addRow').on( 'click', function () {
+		t.row.add( [
+			counter +'.1',
+			counter +'.2',
+			counter +'.3',
+			counter +'.4',
+			counter +'.5'
+		] ).draw( false );
+
+		counter++;
+	} );
+
+	// Automatically add a first row of data
+	$('#addRow').click();
 } );
 
-function fnClickAddRow() {
-	$('#example').dataTable().fnAddData( [
-		giCount+".1",
-		giCount+".2",
-		giCount+".3",
-		giCount+".4" ] );
-	
-	giCount++;
-}</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Add rows</span></h1>
+			<div class="info">
+				<p>New rows can be added to a DataTable using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
+				"DataTables API method">row.add()</code></a> API method. Simply call the API function with the data for the new row (be it an array or object). Multiple rows can
+				be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a> method (note the
+				plural). Data can likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title=
+				"DataTables API method">row().data()</code></a> and <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
+				"DataTables API method">row().remove()</code></a> methods.</p>
+				<p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
+				"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API employs.</p>
+				<p>This example shows a single row being added each time the button below is clicked upon.</p>
+				<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls to a DataTable, including creating, editing and deleting
+				rows.</p>
 			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
+			<div class="demo-html">
+				<button id="addRow">Add new row</button>
 			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Column 1</th>
+						<th>Column 2</th>
+						<th>Column 3</th>
+						<th>Column 4</th>
+						<th>Column 5</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Column 1</th>
+						<th>Column 2</th>
+						<th>Column 3</th>
+						<th>Column 4</th>
+						<th>Column 5</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	var t = $('#example').DataTable();
+	var counter = 1;
+
+	$('#addRow').on( 'click', function () {
+		t.row.add( [
+			counter +'.1',
+			counter +'.2',
+			counter +'.3',
+			counter +'.4',
+			counter +'.5'
+		] ).draw( false );
+
+		counter++;
+	} );
+
+	// Automatically add a first row of data
+	$('#addRow').click();
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">API</a></h3>
+						<ul class="toc active">
+							<li class="active">
+								<a href="./add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="./multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="./highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="./select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../ajax/index.html">Ajax</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../ajax/simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="../ajax/null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
 			</div>
 		</div>
-	</body>
+	</section>
+</body>
 </html>

examples/api/counter_column.html

@@ -1,690 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$('#example').dataTable( {
-					"fnDrawCallback": function ( oSettings ) {
-						/* Need to redo the counters if filtered or sorted */
-						if ( oSettings.bSorted || oSettings.bFiltered )
-						{
-							for ( var i=0, iLen=oSettings.aiDisplay.length ; i<iLen ; i++ )
-							{
-								$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
-							}
-						}
-					},
-					"aoColumnDefs": [
-						{ "bSortable": false, "aTargets": [ 0 ] }
-					],
-					"aaSorting": [[ 1, 'asc' ]]
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables row numbers example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>A fairly common requirement for highly interactive tables which are displayed on the web is to have a column which with a 'counter' for the row number. This column should not be sortable, and change dynamically as the sorting and filtering applied to the table is altered by the end user.</p>
-			<p>This example shows how this can be achieved with DataTables, where the first column is the counter column, and is updated when sorting or filtering occurs. Also the first column is marked as un-sortable and initial sorting is applied only on the second column.</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th>Index</th>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr class="gradeX">
-			<td class="center">1</td>
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 4.0</td>
-			<td>Win 95+</td>
-			<td class="center">4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td class="center">2</td>
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">3</td>
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">4</td>
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">5</td>
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">6</td>
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">7</td>
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">8</td>
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">9</td>
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">10</td>
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">11</td>
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">12</td>
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">13</td>
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">14</td>
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">15</td>
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">16</td>
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">17</td>
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">18</td>
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">19</td>
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">20</td>
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">21</td>
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">22</td>
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">23</td>
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">24</td>
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">25</td>
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">26</td>
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">27</td>
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">28</td>
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">29</td>
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">30</td>
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">31</td>
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">32</td>
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">33</td>
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">34</td>
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">35</td>
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">36</td>
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">37</td>
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">38</td>
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">39</td>
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">40</td>
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">41</td>
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">42</td>
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">43</td>
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr class="gradeC">
-			<td class="center">44</td>
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">45</td>
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">46</td>
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td class="center">47</td>
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td class="center">48</td>
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td class="center">49</td>
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">50</td>
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td class="center">51</td>
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td class="center">52</td>
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td class="center">53</td>
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td class="center">54</td>
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td class="center">55</td>
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td class="center">56</td>
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeU">
-			<td class="center">57</td>
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Index</th>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable( {
-		"fnDrawCallback": function ( oSettings ) {
-			/* Need to redo the counters if filtered or sorted */
-			if ( oSettings.bSorted || oSettings.bFiltered )
-			{
-				for ( var i=0, iLen=oSettings.aiDisplay.length ; i&lt;iLen ; i++ )
-				{
-					$('td:eq(0)', oSettings.aoData[ oSettings.aiDisplay[i] ].nTr ).html( i+1 );
-				}
-			}
-		},
-		"aoColumnDefs": [
-			{ "bSortable": false, "aTargets": [ 0 ] }
-		],
-		"aaSorting": [[ 1, 'asc' ]]
-	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/api/counter_columns.html

@@ -0,0 +1,924 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Index column</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+$(document).ready(function() {
+	var t = $('#example').DataTable( {
+		"columnDefs": [ {
+			"searchable": false,
+			"orderable": false,
+			"targets": 0
+		} ],
+		"order": [[ 1, 'asc' ]]
+	} );
+
+	t.on( 'order.dt search.dt', function () {
+		t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
+			cell.innerHTML = i+1;
+		} );
+	} ).draw();
+} );
+
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Index column</span></h1>
+			<div class="info">
+				<p>Highly-interactive tables often require a 'counter' column that contains the position for each row in the table. 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.</p>
+				<p>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 <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order</code></a> and <a href=
+				"//datatables.net/reference/event/search"><code class="event" title="DataTables event">search</code></a> events emitted by the table. When these events are
+				detected the <a href="//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()</code></a> method is used
+				to get the TD/TH nodes for the target column and the <code>each()</code> helper function used to iterate over each, which have their contents updated as needed.
+				Note that the <code>filter</code> and <code>order</code> options are using in the <a href="//datatables.net/reference/api/column()"><code class="api" title=
+				"DataTables API method">column()</code></a> method to get the nodes in the current order and with the currently applied filter.</p>
+			</div>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th></th>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td></td>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td></td>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+				<tfoot>
+					<tr>
+						<th></th>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	var t = $('#example').DataTable( {
+		&quot;columnDefs&quot;: [ {
+			&quot;searchable&quot;: false,
+			&quot;orderable&quot;: false,
+			&quot;targets&quot;: 0
+		} ],
+		&quot;order&quot;: [[ 1, 'asc' ]]
+	} );
+
+	t.on( 'order.dt search.dt', function () {
+		t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
+			cell.innerHTML = i+1;
+		} );
+	} ).draw();
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">API</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="./multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="./highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="./select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li class="active">
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../ajax/index.html">Ajax</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../ajax/simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="../ajax/null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/api/editable.html

@@ -1,640 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../examples_support/jquery.jeditable.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				/* Init DataTables */
-				var oTable = $('#example').dataTable();
-				
-				/* Apply the jEditable handlers to the table */
-				oTable.$('td').editable( '../examples_support/editable_ajax.php', {
-					"callback": function( sValue, y ) {
-						var aPos = oTable.fnGetPosition( this );
-						oTable.fnUpdate( sValue, aPos[0], aPos[1] );
-					},
-					"submitdata": function ( value, settings ) {
-						return {
-							"row_id": this.parentNode.getAttribute('id'),
-							"column": oTable.fnGetPosition( this )[2]
-						};
-					},
-					"height": "14px",
-					"width": "100%"
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables editing example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>Using DataTables in-combination with the excellent <a href="http://www.appelsiini.net/projects/jeditable">jEditable</a> plugin for jQuery allows you to produce a table which can have individual cells edited. The table can then be updated such that filtering, sorting etc. will all work as expected. This is showing in the demo below.</p>
-			<p>The example shows how a table element can be edited (you could limit to a particular column if you wish using the selector), posted to the server (for saving in a database or whatever) and then placed back into the DataTable. The server's processing in this example simply appends the string '(server updated)' to indicate that something has happened on the server.</p>
-			<p>Note also that this example makes use of the information in the 'ID' attribute of the TR element. This is useful in order to tell the server what row is being updated - this can readily be expended to include column information as required. Further to this, it is worth noting that to use this type of example with DataTables' server-side processing option, you must use <a href="http://datatables.net/usage/callbacks#fnDrawCallback">fnDrawCallback</a> to apply the event listeners on each draw.</p>
-			<p>Finally, if you are interested in a full <a href="http://en.wikipedia.org/wiki/Create,_read,_update_and_delete">CRUD</a> implementation for DataTables, check out the <a href="http://editor.datatables.net">Editor plug-in for DataTables</a>, which provides a flexible and easy to use create, edit and delete environment for DataTables controlled tables with full server interaction.</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr id="1" class="gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 
-				4.0
-				</td>
-			<td>Win 95+</td>
-			<td class="center">4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr id="2" class="gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr id="3" class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="4" class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="5" class="gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="6" class="gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="7" class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="8" class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="9" class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="10" class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="11" class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="12" class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="13" class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="14" class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="15" class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="16" class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="17" class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="18" class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="19" class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="20" class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="21" class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="22" class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="23" class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="24" class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="25" class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="26" class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="27" class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="28" class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="29" class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="30" class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="31" class="gradeA">
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="32" class="gradeA">
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="33" class="gradeA">
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="34" class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="35" class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="36" class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="37" class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="38" class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="39" class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="40" class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="41" class="gradeA">
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="42" class="gradeA">
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="43" class="gradeA">
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr id="44" class="gradeC">
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr id="45" class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="46" class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="47" class="gradeX">
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr id="48" class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr id="49" class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr id="50" class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr id="51" class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr id="52" class="gradeX">
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr id="53" class="gradeX">
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr id="54" class="gradeX">
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr id="55" class="gradeC">
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr id="56" class="gradeC">
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr id="57" class="gradeU">
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	/* Init DataTables */
-	var oTable = $('#example').dataTable();
-	
-	/* Apply the jEditable handlers to the table */
-	oTable.$('td').editable( '../examples_support/editable_ajax.php', {
-		"callback": function( sValue, y ) {
-			var aPos = oTable.fnGetPosition( this );
-			oTable.fnUpdate( sValue, aPos[0], aPos[1] );
-		},
-		"submitdata": function ( value, settings ) {
-			return {
-				"row_id": this.parentNode.getAttribute('id'),
-				"column": oTable.fnGetPosition( this )[2]
-			};
-		},
-		"height": "14px",
-		"width": "100%"
-	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/api/index.html

@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<title>DataTables examples - API</title>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>API</span></h1>
+			<div class="info">
+				<p>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.</p>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="./add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="./multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="./highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="./select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/api/tabs_and_scrolling.html

@@ -1,456 +1,496 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 <html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table_jui.css";
-			@import "../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
-			.ui-tabs .ui-tabs-panel { padding: 10px }
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" language="javascript" src="../examples_support/jquery-ui-tabs.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$("#tabs").tabs( {
-					"show": function(event, ui) {
-						var table = $.fn.dataTable.fnTables(true);
-						if ( table.length > 0 ) {
-							$(table).dataTable().fnAdjustColumnSizing();
-						}
-					}
-				} );
-				
-				$('table.display').dataTable( {
-					"sScrollY": "200px",
-					"bScrollCollapse": true,
-					"bPaginate": false,
-					"bJQueryUI": true,
-					"aoColumnDefs": [
-						{ "sWidth": "10%", "aTargets": [ -1 ] }
-					]
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables scrolling and jQuery UI tabs
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Scrolling and Bootstrap tabs</title>
+	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+	<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.bootstrap.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/dataTables.bootstrap.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+$(document).ready(function() {
+	$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
+		$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
+	} );
+	
+	$('table.table').DataTable( {
+		ajax:           '../ajax/data/arrays.txt',
+		scrollY:        200,
+		scrollCollapse: true,
+		paging:         false
+	} );
+
+	// Apply a search to the second table for the demo
+	$('#myTable2').DataTable().search( 'New York' ).draw();
+} );
+
+
+	</script>
+</head>
+<body class="dt-example dt-example-bootstrap">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Scrolling and Bootstrap tabs</span></h1>
+			<div class="info">
+				<p>This example shows how DataTables with scrolling can be used together with <a href="http://getbootstrap.com/javascript/#tabs">Bootstrap tabs</a> (or indeed any
+				other method whereby the table is in a hidden, <code>display:none</code>, element when it is initialised).</p>
+				<p>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.</p>
+				<p>This misalignment can be corrected by the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title=
+				"DataTables API method">columns.adjust()</code></a> method when the table is made visible (i.e. it has dimensions).</p>
+				<p>This example shows how the Bootstrap <code>shown.bs.tab</code> event can be used to trigger this method call. The visible tables on the page are selected using
+				the static <a href="//datatables.net/reference/api/%24.fn.dataTable.tables()"><code class="api" title="DataTables API method">$.fn.dataTable.tables()</code></a>
+				method and running the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title="DataTables API method">columns.adjust()</code></a> method
+				on them.</p>
 			</div>
-			
-			<h1>Preamble</h1>
-			<p>This example shows how DataTables with scrolling can be used together with jQuery UI 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 DataTables is initialised and it is in a hidden element, the browser doesn't have any measurements with which to give DataTables, and this will require in the misalignment of columns when scrolling is enabled.</p>
-			<p>The method to get around this is to call the fnAdjustColumnSizing API function. This function will calculate the column widths that are needed based on the current data and then redraw the table - which is exactly what is needed when the table becomes visible for the first time. For this we use the 'show' method provided by jQuery UI tables. We check to see if the DataTable has been created or not (note the extra selector for 'div.dataTables_scrollBody', this is added when the DataTable is initialised). If the table has been initialised, we re-size it. An optimisation could be added to re-size only of the first showing of the table.</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-				<div id="tabs">
-					<ul>
-						<li><a href="#tabs-1">Trident browsers</a></li>
-						<li><a href="#tabs-2">Gecko browsers</a></li>
-					</ul>
-					
-					<div id="tabs-1">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example1">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>Grade</th>
-		</tr>
-	</thead>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>Grade</th>
-		</tr>
-	</tfoot>
-	<tbody>
-		<tr class="odd gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 4.0</td>
-			<td>Win 95+</td>
-			<td class="center">4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="odd gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-	<tbody>
-</table>
+			<div class="demo-html"></div>
+			<div>
+				<ul class="nav nav-tabs" role="tablist">
+					<li class="active">
+						<a href="#tab-table1" data-toggle="tab">Table 1</a>
+					</li>
+					<li>
+						<a href="#tab-table2" data-toggle="tab">Table 2</a>
+					</li>
+				</ul>
+				<div class="tab-content">
+					<div class="tab-pane active" id="tab-table1">
+						<table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
+							<thead>
+								<tr>
+									<th>Name</th>
+									<th>Position</th>
+									<th>Office</th>
+									<th>Extn.</th>
+									<th>Start date</th>
+									<th>Salary</th>
+								</tr>
+							</thead>
+						</table>
 					</div>
-
-
-					<div id="tabs-2">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example2">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>Grade</th>
-		</tr>
-	</thead>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>Grade</th>
-		</tr>
-	</tfoot>
-	<tbody>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-	</tbody>
-</table>
+					<div class="tab-pane" id="tab-table2">
+						<table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
+							<thead>
+								<tr>
+									<th>Name</th>
+									<th>Position</th>
+									<th>Office</th>
+									<th>Extn.</th>
+									<th>Start date</th>
+									<th>Salary</th>
+								</tr>
+							</thead>
+						</table>
 					</div>
 				</div>
 			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$("#tabs").tabs( {
-		"show": function(event, ui) {
-			var table = $.fn.dataTable.fnTables(true);
-			if ( table.length &gt; 0 ) {
-				$(table).dataTable().fnAdjustColumnSizing();
-			}
-		}
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('a[data-toggle=&quot;tab&quot;]').on( 'shown.bs.tab', function (e) {
+		$.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
 	} );
 	
-	$('table.display').dataTable( {
-		"sScrollY": "200px",
-		"bScrollCollapse": true,
-		"bPaginate": false,
-		"bJQueryUI": true,
-		"aoColumnDefs": [
-			{ "sWidth": "10%", "aTargets": [ -1 ] }
-		]
+	$('table.table').DataTable( {
+		ajax:           '../ajax/data/arrays.txt',
+		scrollY:        200,
+		scrollCollapse: true,
+		paging:         false
 	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
+
+	// Apply a search to the second table for the demo
+	$('#myTable2').DataTable().search( 'New York' ).draw();
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/dataTables.bootstrap.js">../../media/js/dataTables.bootstrap.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href=
+							"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css</a>
+						</li>
+						<li>
+							<a href="../../media/css/dataTables.bootstrap.css">../../media/css/dataTables.bootstrap.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
 			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">API</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="./multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="./highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="./select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li class="active">
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../ajax/index.html">Ajax</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../ajax/simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="../ajax/null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
 			</div>
 		</div>
-	</body>
+	</section>
+</body>
 </html>

examples/basic_init/base.html

@@ -1,596 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/jquery.dataTables.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$('#example').dataTable();
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables base example (CDN CSS)
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr class="odd gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 4.0</td>
-			<td>Win 95+</td>
-			<td class="center"> 4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="even gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="even gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="even gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr class="gradeC">
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeU">
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable();
-} );</pre>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/basic_init/base_themeroller.html

@@ -1,592 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/jquery.dataTables_themeroller.css";
-			@import "../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$('#example').dataTable( {
-					"bJQueryUI": true,
-					"sPaginationType": "full_numbers"
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables base example (CDN CSS)
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr class="odd gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 4.0</td>
-			<td>Win 95+</td>
-			<td class="center"> 4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="even gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="even gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="even gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr class="gradeC">
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeU">
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-	<tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable();
-} );</pre>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/basic_init/comma-decimal.html

@@ -0,0 +1,909 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Language - Comma decimal place</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"language": {
+			"decimal": ",",
+			"thousands": "."
+		}
+	} );
+} );
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Language - Comma decimal place</span></h1>
+			<div class="info">
+				<p>A dot (<code>.</code>) is used to mark the decimal place in Javascript, however, <a href="http://en.wikipedia.org/wiki/Decimal_mark">many parts of the world use
+				a comma</a> (<code>,</code>) and other characters such as the Unicode decimal separator (<code>⎖</code>) or a dash (<code>-</code>) are often used to show the
+				decimal place in a displayed number.</p>
+				<p>When reading such numbers, Javascript won't automatically recognise them as numbers, however, DataTables' type detection and sorting methods can be instructed
+				through the <a href="//datatables.net/reference/option/language.decimal"><code class="option" title="DataTables initialisation option">language.decimal</code></a>
+				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.</p>
+				<p>Any character can be passed in using the <a href="//datatables.net/reference/option/language.decimal"><code class="option" title=
+				"DataTables initialisation option">language.decimal</code></a> 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.</p>
+				<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the final column.</p>
+			</div>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320.800,00</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170.750,00</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86.000,00</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433.060,00</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162.700,00</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372.000,00</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137.500,00</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327.900,00</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205.500,00</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103.600,00</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90.560,00</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342.000,00</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470.600,00</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313.500,00</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385.750,00</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198.500,00</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725.000,00</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237.500,00</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132.000,00</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217.500,00</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345.000,00</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675.000,00</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106.450,00</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85.600,00</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1.200.000,00</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92.575,00</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357.650,00</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206.850,00</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850.000,00</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163.000,00</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95.400,00</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114.500,00</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145.000,00</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235.500,00</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324.050,00</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85.675,00</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164.500,00</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109.850,00</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452.500,00</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136.200,00</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645.750,00</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234.500,00</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163.500,00</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139.575,00</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98.540,00</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87.500,00</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138.575,00</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125.250,00</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115.000,00</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75.650,00</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145.600,00</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356.250,00</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103.500,00</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86.500,00</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183.000,00</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183.000,00</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112.000,00</td>
+					</tr>
+				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable( {
+		&quot;language&quot;: {
+			&quot;decimal&quot;: &quot;,&quot;,
+			&quot;thousands&quot;: &quot;.&quot;
+		}
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Basic initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="./filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="./table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li class="active">
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../ajax/index.html">Ajax</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../ajax/simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="../ajax/null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/basic_init/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<title>DataTables examples - Basic initialisation</title>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Basic initialisation</span></h1>
+			<div class="info">
+				<p>DataTables is a simple-to-use jQuery plug-in with a huge range of customisable options. 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.</p>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="./zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="./filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="./table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/basic_init/scroll_y_dynamic.html

@@ -0,0 +1,901 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Scroll - vertical, dynamic height</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+$(document).ready(function() {
+	$('#example').DataTable( {
+		scrollY:        '50vh',
+		scrollCollapse: true,
+		paging:         false
+	} );
+} );
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Scroll - vertical, dynamic height</span></h1>
+			<div class="info">
+				<p>This example shows a vertically scrolling DataTable that makes use of the CSS3 <code>vh</code> unit in order to dynamically resize the viewport based on the
+				browser window height. The <a href="https://developer.mozilla.org/en/docs/Web/CSS/length#Viewport-percentage_lengths"><code>vh</code> unit</a> is effectively a
+				percentage of the browser window height. So the <code>50vh</code> used in this example is 50% of the window height. The viewport size will update dynamically as
+				the window is resized.</p>
+				<p>A relatively modern browser is <a href="http://caniuse.com/#feat=viewport-units">required for <code>vh</code> units</a> to operate correctly. IE9+ supports the
+				<code>vh</code> unit and all other evergreen browsers.</p>
+			</div>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable( {
+		scrollY:        '50vh',
+		scrollCollapse: true,
+		paging:         false
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Basic initialisation</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="./filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="./table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li class="active">
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../ajax/index.html">Ajax</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../ajax/simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="../ajax/null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/basic_init/scroll_y_infinite.html

@@ -1,610 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-			div.table_Wrapper { border:10px solid blue; }
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$('#example').dataTable( {
-					"bScrollInfinite": true,
-					"bScrollCollapse": true,
-					"sScrollY": "200px"
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables infinite vertical scrolling example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>This example shows the DataTables table body scrolling in the vertical direction with infinite scrolling. The idea of infinite scrolling means that data will be added to the table dynamically, as and when needed by the user scrolling the table. A sub-set of the data is loaded initially, and more added as needed (technically of course, it is not "infinite" since it will stop loading data at the end of the data set!). Note that pagination much be enabled for infinite scrolling to work, but the pagination controls will not be shown (they could be, but can cause very confusing user interaction).</p>
-			<p>DataTables' infinite scroll can be used with any of the <a href="http://datatables.net/usage/#data_sources">four data sources</a> supported, and they do not require any modification to work (including server-side scripts).</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</thead>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-	<tbody>
-		<tr class="odd gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 4.0</td>
-			<td>Win 95+</td>
-			<td class="center">4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="odd gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr class="gradeC">
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeU">
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable( {
-		"bScrollInfinite": true,
-		"bScrollCollapse": true,
-		"sScrollY": "200px"
-	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/basic_init/scroll_y_theme.html

@@ -1,609 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table_jui.css";
-			@import "../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$('#example').dataTable( {
-					"sScrollY": 200,
-					"bJQueryUI": true,
-					"sPaginationType": "full_numbers"
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables vertical scrolling with jQuery UI ThemeRoller example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>This example is an extension of the vertical scrolling example, showing DataTables ability to be themed by jQuery UI's ThemeRoller.</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th width="12%">CSS grade</th>
-		</tr>
-	</thead>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-	<tbody>
-		<tr class="odd gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 4.0</td>
-			<td>Win 95+</td>
-			<td class="center">4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="odd gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr class="gradeC">
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeU">
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable( {
-		"sScrollY": 200,
-		"bJQueryUI": true,
-		"sPaginationType": "full_numbers"
-	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/basic_init/themes.html

@@ -1,598 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table_jui.css";
-			@import "../examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				oTable = $('#example').dataTable({
-					"bJQueryUI": true,
-					"sPaginationType": "full_numbers"
-				});
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables with jQuery UI themes example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>Styling widgets such as DataTables can often take a considerable amount of time to fully integrate it into your site/application, with the demo styles as a base. This holds true for all widgets, and the jQuery UI team have addressed this issue by introducing themes through their excellent <a href="http://jqueryui.com/themeroller/">ThemeRoller</a>. DataTables has full support for ThemeRoller created themes, all you need to do is enable the <b>bJQueryUI</b> flag in the initialisation object, and the required mark-up and classes will be added by DataTables.</p>
-			
-			<h1>Live example</h1>
-			<div class="demo_jui">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr class="gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 4.0</td>
-			<td>Win 95+</td>
-			<td class="center">4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr class="gradeC">
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeU">
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	oTable = $('#example').dataTable({
-		"bJQueryUI": true,
-		"sPaginationType": "full_numbers"
-	});
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/basic_init/zero_config.html

@@ -1,600 +0,0 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
-<html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$('#example').dataTable();
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables zero configuration example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).</p>
-			
-			<h1>Live example</h1>
-			<div id="demo">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
-	<thead>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		<tr class="odd gradeX">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 4.0</td>
-			<td>Win 95+</td>
-			<td class="center"> 4</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="even gradeC">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.0</td>
-			<td>Win 95+</td>
-			<td class="center">5</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 5.5</td>
-			<td>Win 95+</td>
-			<td class="center">5.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="even gradeA">
-			<td>Trident</td>
-			<td>Internet
-				 Explorer 6</td>
-			<td>Win 98+</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="odd gradeA">
-			<td>Trident</td>
-			<td>Internet Explorer 7</td>
-			<td>Win XP SP2+</td>
-			<td class="center">7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="even gradeA">
-			<td>Trident</td>
-			<td>AOL browser (AOL desktop)</td>
-			<td>Win XP</td>
-			<td class="center">6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 1.5</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 2.0</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Firefox 3.0</td>
-			<td>Win 2k+ / OSX.3+</td>
-			<td class="center">1.9</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.0</td>
-			<td>OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Camino 1.5</td>
-			<td>OSX.3+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape 7.2</td>
-			<td>Win 95+ / Mac OS 8.6-9.2</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Browser 8</td>
-			<td>Win 98SE+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Netscape Navigator 9</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.1</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.2</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.2</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.3</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.4</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.4</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.5</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.6</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">1.6</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.7</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.7</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Mozilla 1.8</td>
-			<td>Win 98+ / OSX.1+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Seamonkey 1.1</td>
-			<td>Win 98+ / OSX.2+</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Gecko</td>
-			<td>Epiphany 2.20</td>
-			<td>Gnome</td>
-			<td class="center">1.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.2</td>
-			<td>OSX.3</td>
-			<td class="center">125.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 1.3</td>
-			<td>OSX.3</td>
-			<td class="center">312.8</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 2.0</td>
-			<td>OSX.4+</td>
-			<td class="center">419.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>Safari 3.0</td>
-			<td>OSX.4+</td>
-			<td class="center">522.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>OmniWeb 5.5</td>
-			<td>OSX.4+</td>
-			<td class="center">420</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>iPod Touch / iPhone</td>
-			<td>iPod</td>
-			<td class="center">420.1</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Webkit</td>
-			<td>S60</td>
-			<td>S60</td>
-			<td class="center">413</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.0</td>
-			<td>Win 95+ / OSX.1+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 7.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.0</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 8.5</td>
-			<td>Win 95+ / OSX.2+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.0</td>
-			<td>Win 95+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.2</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera 9.5</td>
-			<td>Win 88+ / OSX.3+</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Opera for Wii</td>
-			<td>Wii</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nokia N800</td>
-			<td>N800</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Presto</td>
-			<td>Nintendo DS browser</td>
-			<td>Nintendo DS</td>
-			<td class="center">8.5</td>
-			<td class="center">C/A<sup>1</sup></td>
-		</tr>
-		<tr class="gradeC">
-			<td>KHTML</td>
-			<td>Konqureror 3.1</td>
-			<td>KDE 3.1</td>
-			<td class="center">3.1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.3</td>
-			<td>KDE 3.3</td>
-			<td class="center">3.3</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeA">
-			<td>KHTML</td>
-			<td>Konqureror 3.5</td>
-			<td>KDE 3.5</td>
-			<td class="center">3.5</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Tasman</td>
-			<td>Internet Explorer 4.5</td>
-			<td>Mac OS 8-9</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.1</td>
-			<td>Mac OS 7.6-9</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Tasman</td>
-			<td>Internet Explorer 5.2</td>
-			<td>Mac OS 8-X</td>
-			<td class="center">1</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.1</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeA">
-			<td>Misc</td>
-			<td>NetFront 3.4</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">A</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Dillo 0.8</td>
-			<td>Embedded devices</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Links</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeX">
-			<td>Misc</td>
-			<td>Lynx</td>
-			<td>Text only</td>
-			<td class="center">-</td>
-			<td class="center">X</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>IE Mobile</td>
-			<td>Windows Mobile 6</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeC">
-			<td>Misc</td>
-			<td>PSP browser</td>
-			<td>PSP</td>
-			<td class="center">-</td>
-			<td class="center">C</td>
-		</tr>
-		<tr class="gradeU">
-			<td>Other browsers</td>
-			<td>All others</td>
-			<td>-</td>
-			<td class="center">-</td>
-			<td class="center">U</td>
-		</tr>
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable();
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
-			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
-			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
-			</div>
-		</div>
-	</body>
-</html>

examples/basic_init/zero_configuration.html

@@ -0,0 +1,892 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Zero configuration</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
+
+$(document).ready(function() {
+	$('#example').DataTable();
+} );
+
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Zero configuration</span></h1>
+			<div class="info">
+				<p>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:
+				<code>$().DataTable();</code>.</p>
+				<p>Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.</p>
+			</div>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td>Tiger Nixon</td>
+						<td>System Architect</td>
+						<td>Edinburgh</td>
+						<td>61</td>
+						<td>2011/04/25</td>
+						<td>$320,800</td>
+					</tr>
+					<tr>
+						<td>Garrett Winters</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>63</td>
+						<td>2011/07/25</td>
+						<td>$170,750</td>
+					</tr>
+					<tr>
+						<td>Ashton Cox</td>
+						<td>Junior Technical Author</td>
+						<td>San Francisco</td>
+						<td>66</td>
+						<td>2009/01/12</td>
+						<td>$86,000</td>
+					</tr>
+					<tr>
+						<td>Cedric Kelly</td>
+						<td>Senior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2012/03/29</td>
+						<td>$433,060</td>
+					</tr>
+					<tr>
+						<td>Airi Satou</td>
+						<td>Accountant</td>
+						<td>Tokyo</td>
+						<td>33</td>
+						<td>2008/11/28</td>
+						<td>$162,700</td>
+					</tr>
+					<tr>
+						<td>Brielle Williamson</td>
+						<td>Integration Specialist</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2012/12/02</td>
+						<td>$372,000</td>
+					</tr>
+					<tr>
+						<td>Herrod Chandler</td>
+						<td>Sales Assistant</td>
+						<td>San Francisco</td>
+						<td>59</td>
+						<td>2012/08/06</td>
+						<td>$137,500</td>
+					</tr>
+					<tr>
+						<td>Rhona Davidson</td>
+						<td>Integration Specialist</td>
+						<td>Tokyo</td>
+						<td>55</td>
+						<td>2010/10/14</td>
+						<td>$327,900</td>
+					</tr>
+					<tr>
+						<td>Colleen Hurst</td>
+						<td>Javascript Developer</td>
+						<td>San Francisco</td>
+						<td>39</td>
+						<td>2009/09/15</td>
+						<td>$205,500</td>
+					</tr>
+					<tr>
+						<td>Sonya Frost</td>
+						<td>Software Engineer</td>
+						<td>Edinburgh</td>
+						<td>23</td>
+						<td>2008/12/13</td>
+						<td>$103,600</td>
+					</tr>
+					<tr>
+						<td>Jena Gaines</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>30</td>
+						<td>2008/12/19</td>
+						<td>$90,560</td>
+					</tr>
+					<tr>
+						<td>Quinn Flynn</td>
+						<td>Support Lead</td>
+						<td>Edinburgh</td>
+						<td>22</td>
+						<td>2013/03/03</td>
+						<td>$342,000</td>
+					</tr>
+					<tr>
+						<td>Charde Marshall</td>
+						<td>Regional Director</td>
+						<td>San Francisco</td>
+						<td>36</td>
+						<td>2008/10/16</td>
+						<td>$470,600</td>
+					</tr>
+					<tr>
+						<td>Haley Kennedy</td>
+						<td>Senior Marketing Designer</td>
+						<td>London</td>
+						<td>43</td>
+						<td>2012/12/18</td>
+						<td>$313,500</td>
+					</tr>
+					<tr>
+						<td>Tatyana Fitzpatrick</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>19</td>
+						<td>2010/03/17</td>
+						<td>$385,750</td>
+					</tr>
+					<tr>
+						<td>Michael Silva</td>
+						<td>Marketing Designer</td>
+						<td>London</td>
+						<td>66</td>
+						<td>2012/11/27</td>
+						<td>$198,500</td>
+					</tr>
+					<tr>
+						<td>Paul Byrd</td>
+						<td>Chief Financial Officer (CFO)</td>
+						<td>New York</td>
+						<td>64</td>
+						<td>2010/06/09</td>
+						<td>$725,000</td>
+					</tr>
+					<tr>
+						<td>Gloria Little</td>
+						<td>Systems Administrator</td>
+						<td>New York</td>
+						<td>59</td>
+						<td>2009/04/10</td>
+						<td>$237,500</td>
+					</tr>
+					<tr>
+						<td>Bradley Greer</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>41</td>
+						<td>2012/10/13</td>
+						<td>$132,000</td>
+					</tr>
+					<tr>
+						<td>Dai Rios</td>
+						<td>Personnel Lead</td>
+						<td>Edinburgh</td>
+						<td>35</td>
+						<td>2012/09/26</td>
+						<td>$217,500</td>
+					</tr>
+					<tr>
+						<td>Jenette Caldwell</td>
+						<td>Development Lead</td>
+						<td>New York</td>
+						<td>30</td>
+						<td>2011/09/03</td>
+						<td>$345,000</td>
+					</tr>
+					<tr>
+						<td>Yuri Berry</td>
+						<td>Chief Marketing Officer (CMO)</td>
+						<td>New York</td>
+						<td>40</td>
+						<td>2009/06/25</td>
+						<td>$675,000</td>
+					</tr>
+					<tr>
+						<td>Caesar Vance</td>
+						<td>Pre-Sales Support</td>
+						<td>New York</td>
+						<td>21</td>
+						<td>2011/12/12</td>
+						<td>$106,450</td>
+					</tr>
+					<tr>
+						<td>Doris Wilder</td>
+						<td>Sales Assistant</td>
+						<td>Sidney</td>
+						<td>23</td>
+						<td>2010/09/20</td>
+						<td>$85,600</td>
+					</tr>
+					<tr>
+						<td>Angelica Ramos</td>
+						<td>Chief Executive Officer (CEO)</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2009/10/09</td>
+						<td>$1,200,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Joyce</td>
+						<td>Developer</td>
+						<td>Edinburgh</td>
+						<td>42</td>
+						<td>2010/12/22</td>
+						<td>$92,575</td>
+					</tr>
+					<tr>
+						<td>Jennifer Chang</td>
+						<td>Regional Director</td>
+						<td>Singapore</td>
+						<td>28</td>
+						<td>2010/11/14</td>
+						<td>$357,650</td>
+					</tr>
+					<tr>
+						<td>Brenden Wagner</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>28</td>
+						<td>2011/06/07</td>
+						<td>$206,850</td>
+					</tr>
+					<tr>
+						<td>Fiona Green</td>
+						<td>Chief Operating Officer (COO)</td>
+						<td>San Francisco</td>
+						<td>48</td>
+						<td>2010/03/11</td>
+						<td>$850,000</td>
+					</tr>
+					<tr>
+						<td>Shou Itou</td>
+						<td>Regional Marketing</td>
+						<td>Tokyo</td>
+						<td>20</td>
+						<td>2011/08/14</td>
+						<td>$163,000</td>
+					</tr>
+					<tr>
+						<td>Michelle House</td>
+						<td>Integration Specialist</td>
+						<td>Sidney</td>
+						<td>37</td>
+						<td>2011/06/02</td>
+						<td>$95,400</td>
+					</tr>
+					<tr>
+						<td>Suki Burks</td>
+						<td>Developer</td>
+						<td>London</td>
+						<td>53</td>
+						<td>2009/10/22</td>
+						<td>$114,500</td>
+					</tr>
+					<tr>
+						<td>Prescott Bartlett</td>
+						<td>Technical Author</td>
+						<td>London</td>
+						<td>27</td>
+						<td>2011/05/07</td>
+						<td>$145,000</td>
+					</tr>
+					<tr>
+						<td>Gavin Cortez</td>
+						<td>Team Leader</td>
+						<td>San Francisco</td>
+						<td>22</td>
+						<td>2008/10/26</td>
+						<td>$235,500</td>
+					</tr>
+					<tr>
+						<td>Martena Mccray</td>
+						<td>Post-Sales support</td>
+						<td>Edinburgh</td>
+						<td>46</td>
+						<td>2011/03/09</td>
+						<td>$324,050</td>
+					</tr>
+					<tr>
+						<td>Unity Butler</td>
+						<td>Marketing Designer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/12/09</td>
+						<td>$85,675</td>
+					</tr>
+					<tr>
+						<td>Howard Hatfield</td>
+						<td>Office Manager</td>
+						<td>San Francisco</td>
+						<td>51</td>
+						<td>2008/12/16</td>
+						<td>$164,500</td>
+					</tr>
+					<tr>
+						<td>Hope Fuentes</td>
+						<td>Secretary</td>
+						<td>San Francisco</td>
+						<td>41</td>
+						<td>2010/02/12</td>
+						<td>$109,850</td>
+					</tr>
+					<tr>
+						<td>Vivian Harrell</td>
+						<td>Financial Controller</td>
+						<td>San Francisco</td>
+						<td>62</td>
+						<td>2009/02/14</td>
+						<td>$452,500</td>
+					</tr>
+					<tr>
+						<td>Timothy Mooney</td>
+						<td>Office Manager</td>
+						<td>London</td>
+						<td>37</td>
+						<td>2008/12/11</td>
+						<td>$136,200</td>
+					</tr>
+					<tr>
+						<td>Jackson Bradshaw</td>
+						<td>Director</td>
+						<td>New York</td>
+						<td>65</td>
+						<td>2008/09/26</td>
+						<td>$645,750</td>
+					</tr>
+					<tr>
+						<td>Olivia Liang</td>
+						<td>Support Engineer</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2011/02/03</td>
+						<td>$234,500</td>
+					</tr>
+					<tr>
+						<td>Bruno Nash</td>
+						<td>Software Engineer</td>
+						<td>London</td>
+						<td>38</td>
+						<td>2011/05/03</td>
+						<td>$163,500</td>
+					</tr>
+					<tr>
+						<td>Sakura Yamamoto</td>
+						<td>Support Engineer</td>
+						<td>Tokyo</td>
+						<td>37</td>
+						<td>2009/08/19</td>
+						<td>$139,575</td>
+					</tr>
+					<tr>
+						<td>Thor Walton</td>
+						<td>Developer</td>
+						<td>New York</td>
+						<td>61</td>
+						<td>2013/08/11</td>
+						<td>$98,540</td>
+					</tr>
+					<tr>
+						<td>Finn Camacho</td>
+						<td>Support Engineer</td>
+						<td>San Francisco</td>
+						<td>47</td>
+						<td>2009/07/07</td>
+						<td>$87,500</td>
+					</tr>
+					<tr>
+						<td>Serge Baldwin</td>
+						<td>Data Coordinator</td>
+						<td>Singapore</td>
+						<td>64</td>
+						<td>2012/04/09</td>
+						<td>$138,575</td>
+					</tr>
+					<tr>
+						<td>Zenaida Frank</td>
+						<td>Software Engineer</td>
+						<td>New York</td>
+						<td>63</td>
+						<td>2010/01/04</td>
+						<td>$125,250</td>
+					</tr>
+					<tr>
+						<td>Zorita Serrano</td>
+						<td>Software Engineer</td>
+						<td>San Francisco</td>
+						<td>56</td>
+						<td>2012/06/01</td>
+						<td>$115,000</td>
+					</tr>
+					<tr>
+						<td>Jennifer Acosta</td>
+						<td>Junior Javascript Developer</td>
+						<td>Edinburgh</td>
+						<td>43</td>
+						<td>2013/02/01</td>
+						<td>$75,650</td>
+					</tr>
+					<tr>
+						<td>Cara Stevens</td>
+						<td>Sales Assistant</td>
+						<td>New York</td>
+						<td>46</td>
+						<td>2011/12/06</td>
+						<td>$145,600</td>
+					</tr>
+					<tr>
+						<td>Hermione Butler</td>
+						<td>Regional Director</td>
+						<td>London</td>
+						<td>47</td>
+						<td>2011/03/21</td>
+						<td>$356,250</td>
+					</tr>
+					<tr>
+						<td>Lael Greer</td>
+						<td>Systems Administrator</td>
+						<td>London</td>
+						<td>21</td>
+						<td>2009/02/27</td>
+						<td>$103,500</td>
+					</tr>
+					<tr>
+						<td>Jonas Alexander</td>
+						<td>Developer</td>
+						<td>San Francisco</td>
+						<td>30</td>
+						<td>2010/07/14</td>
+						<td>$86,500</td>
+					</tr>
+					<tr>
+						<td>Shad Decker</td>
+						<td>Regional Director</td>
+						<td>Edinburgh</td>
+						<td>51</td>
+						<td>2008/11/13</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Michael Bruce</td>
+						<td>Javascript Developer</td>
+						<td>Singapore</td>
+						<td>29</td>
+						<td>2011/06/27</td>
+						<td>$183,000</td>
+					</tr>
+					<tr>
+						<td>Donna Snider</td>
+						<td>Customer Support</td>
+						<td>New York</td>
+						<td>27</td>
+						<td>2011/01/25</td>
+						<td>$112,000</td>
+					</tr>
+				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable();
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
+			</div>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="./index.html">Basic initialisation</a></h3>
+						<ul class="toc active">
+							<li class="active">
+								<a href="./zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="./filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="./table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../ajax/index.html">Ajax</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../ajax/simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="../ajax/null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/data_sources/ajax.html

@@ -1,208 +1,443 @@
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<!DOCTYPE html>
 <html>
-	<head>
-		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
-		<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
-		
-		<title>DataTables example</title>
-		<style type="text/css" title="currentStyle">
-			@import "../../media/css/demo_page.css";
-			@import "../../media/css/demo_table.css";
-		</style>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
-		<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				var oTable = $('#example').dataTable( {
-					"bProcessing": true,
-					"sAjaxSource": '../ajax/sources/arrays.txt'
-				} );
-			} );
-		</script>
-	</head>
-	<body id="dt_example">
-		<div id="container">
-			<div class="full_width big">
-				DataTables AJAX source example
-			</div>
-			
-			<h1>Preamble</h1>
-			<p>Although DataTables is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aaData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have DataTables go to that source with an XHR call and load data from there. This example shows the latter method in action. DataTables expects an object with an array called "aaData" with the data source.</p>
-			
-			<h1>Live example</h1>
-			<div id="dynamic">
-<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
-	<thead>
-		<tr>
-			<th width="20%">Rendering engine</th>
-			<th width="25%">Browser</th>
-			<th width="25%">Platform(s)</th>
-			<th width="15%">Engine version</th>
-			<th width="15%">CSS grade</th>
-		</tr>
-	</thead>
-	<tbody>
-		
-	</tbody>
-	<tfoot>
-		<tr>
-			<th>Rendering engine</th>
-			<th>Browser</th>
-			<th>Platform(s)</th>
-			<th>Engine version</th>
-			<th>CSS grade</th>
-		</tr>
-	</tfoot>
-</table>
-			</div>
-			<div class="spacer"></div>
-			
-			
-			<h1>Initialisation code</h1>
-			<pre class="brush: js;">$(document).ready(function() {
-	$('#example').dataTable( {
-		"bProcessing": true,
-		"sAjaxSource": '../ajax/sources/arrays.txt'
-	} );
-} );</pre>
-			<style type="text/css">
-				@import "../examples_support/syntax/css/shCore.css";
-			</style>
-			<script type="text/javascript" language="javascript" src="../examples_support/syntax/js/shCore.js"></script>
+<head>
+	<meta charset="utf-8">
+	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
+	<title>DataTables example - Ajax sourced data</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
+	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
+	<style type="text/css" class="init">
+	
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
+	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
+	<script type="text/javascript" language="javascript" class="init">
+	
 
-			<h1>Server response</h1>
-			<p>The code below shows the latest JSON data that has been returned from the server in response to the Ajax request made by DataTables. This will update as further requests are made.</p>
-			<pre id="latest_xhr" class="brush: js;"></pre>
-			
-			
-			<h1>Other examples</h1>
-			<div class="demo_links">
-				<h2>Basic initialisation</h2>
-				<ul>
-					<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
-					<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
-					<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
-					<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</a></li>
-					<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-					<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-					<li><a href="../basic_init/complex_header.html">Complex headers - grouping with colspan</a></li>
-					<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-					<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-					<li><a href="../basic_init/state_save.html">State saving</a></li>
-					<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
-					<li>Scrolling: <br>
-						<a href="../basic_init/scroll_x.html">Horizontal</a> / 
-						<a href="../basic_init/scroll_y.html">Vertical</a> / 
-						<a href="../basic_init/scroll_xy.html">Both</a> / 
-						<a href="../basic_init/scroll_y_theme.html">Themed</a> / 
-						<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
-					</li>
-					<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
-					<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
-				</ul>
-				
-				<h2>Advanced initialisation</h2>
-				<ul>
-					<li>Events: <br>
-						<a href="../advanced_init/events_live.html">Live events</a> / 
-						<a href="../advanced_init/events_pre_init.html">Pre-init</a> / 
-						<a href="../advanced_init/events_post_init.html">Post-init</a>
-					</li>
-					<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-					<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
-					<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
-					<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
-					<li><a href="../advanced_init/complex_header.html">Complex headers and hidden columns</a></li>
-					<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
-					<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
-					<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
-					<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
-					<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
-					<li><a href="../advanced_init/sorting_control.html">Control sorting direction of columns</a></li>
-					<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
-					<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
-					<li><a href="../advanced_init/localstorage.html">State saving with localStorage</a></li>
-					<li><a href="../advanced_init/dt_events.html">Custom events</a></li>
-				</ul>
-				
-				<h2>API</h2>
-				<ul>
-					<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
-					<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
-					<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
-					<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
-					<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
-					<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
-					<li><a href="../api/form.html">Submit form with elements in table</a></li>
-					<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
-					<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
-					<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
-					<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
-					<li><a href="../api/regex.html">Regular expression filtering</a></li>
-				</ul>
+$(document).ready(function() {
+	$('#example').DataTable( {
+		"ajax": '../ajax/data/arrays.txt'
+	} );
+} );
+
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Ajax sourced data</span></h1>
+			<div class="info">
+				<p>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 <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option to the address of the
+				JSON data source.</p>
+				<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option also allows for more
+				advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
+				"DataTables initialisation option">ajax</code></a> documentation and the <a href="../ajax">other Ajax examples</a> for further information.</p>
+				<p>The example below shows DataTables loading data for a table from arrays as the data source (object parameters can also be used through the <a href=
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option ).</p>
 			</div>
-			
-			<div class="demo_links">
-				<h2>Data sources</h2>
-				<ul>
-					<li><a href="../data_sources/dom.html">DOM</a></li>
-					<li><a href="../data_sources/js_array.html">Javascript array</a></li>
-					<li><a href="../data_sources/ajax.html">Ajax source</a></li>
-					<li><a href="../data_sources/server_side.html">Server side processing</a></li>
-				</ul>
-				
-				<h2>Server-side processing</h2>
-				<ul>
-					<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
-					<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
-					<li><a href="../server_side/post.html">Use HTTP POST</a></li>
-					<li><a href="../server_side/ids.html">Automatic addition of IDs and classes to rows</a></li>
-					<li><a href="../server_side/object_data.html">Reading table data from objects</a></li>
-					<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
-					<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
-					<li><a href="../server_side/jsonp.html">JSONP for a cross domain data source</a></li>
-					<li><a href="../server_side/editable.html">jEditable integration with DataTables</a></li>
-					<li><a href="../server_side/defer_loading.html">Deferred loading of Ajax data</a></li>
-					<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
-				</ul>
-				
-				<h2>Ajax data source</h2>
-				<ul>
-					<li><a href="../ajax/ajax.html">Ajax sourced data (array of arrays)</a></li>
-					<li><a href="../ajax/objects.html">Ajax sourced data (array of objects)</a></li>
-					<li><a href="../ajax/defer_render.html">Deferred DOM creation for extra speed</a></li>
-					<li><a href="../ajax/null_data_source.html">Empty data source columns</a></li>
-					<li><a href="../ajax/custom_data_property.html">Use a data source other than aaData (the default)</a></li>
-					<li><a href="../ajax/objects_subarrays.html">Read column data from sub-arrays</a></li>
-					<li><a href="../ajax/deep.html">Read column data from deeply nested properties</a></li>
-				</ul>
-				
-				<h2>Plug-ins</h2>
-				<ul>
-					<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
-					<li><a href="../plug-ins/sorting_plugin.html">Sorting and automatic type detection</a></li>
-					<li><a href="../plug-ins/sorting_sType.html">Sorting without automatic type detection</a></li>
-					<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
-					<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
-					<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
-					<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
-				</ul>
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
+			</table>
+			<ul class="tabs">
+				<li class="active">Javascript</li>
+				<li>HTML</li>
+				<li>CSS</li>
+				<li>Ajax</li>
+				<li>Server-side script</li>
+			</ul>
+			<div class="tabs">
+				<div class="js">
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('#example').DataTable( {
+		&quot;ajax&quot;: '../ajax/data/arrays.txt'
+	} );
+} );</code>
+					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
+					<ul>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+					</ul>
+				</div>
+				<div class="table">
+					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
+				</div>
+				<div class="css">
+					<div>
+						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
+						additional CSS used is shown below:</p><code class="multiline language-css"></code>
+					</div>
+					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
+					<ul>
+						<li>
+							<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
+						</li>
+					</ul>
+				</div>
+				<div class="ajax">
+					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
+					loaded.</p>
+				</div>
+				<div class="php">
+					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
+					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
+					documentation</a>.</p>
+				</div>
 			</div>
-			
-			
-			<div id="footer" class="clear" style="text-align:center;">
-				<p>
-					Please refer to the <a href="http://www.datatables.net/usage">DataTables documentation</a> for full information about its API properties and methods.<br>
-					Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.
-				</p>
-				
-				<span style="font-size:10px;">
-					DataTables designed and created by <a href="http://www.sprymedia.co.uk">Allan Jardine</a> &copy; 2007-2011<br>
-					DataTables is dual licensed under the <a href="http://www.datatables.net/license_gpl2">GPL v2 license</a> or a <a href="http://www.datatables.net/license_bsd">BSD (3-point) license</a>.
-				</span>
+		</section>
+	</div>
+	<section>
+		<div class="footer">
+			<div class="gradient"></div>
+			<div class="liner">
+				<h2>Other examples</h2>
+				<div class="toc">
+					<div class="toc-group">
+						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../styling/index.html">Styling</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../styling/display.html">Base style</a>
+							</li>
+							<li>
+								<a href="../styling/no-classes.html">Base style - no styling classes</a>
+							</li>
+							<li>
+								<a href="../styling/cell-border.html">Base style - cell borders</a>
+							</li>
+							<li>
+								<a href="../styling/compact.html">Base style - compact</a>
+							</li>
+							<li>
+								<a href="../styling/hover.html">Base style - hover</a>
+							</li>
+							<li>
+								<a href="../styling/order-column.html">Base style - order-column</a>
+							</li>
+							<li>
+								<a href="../styling/row-border.html">Base style - row borders</a>
+							</li>
+							<li>
+								<a href="../styling/stripe.html">Base style - stripe</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap.html">Bootstrap 3</a>
+							</li>
+							<li>
+								<a href="../styling/bootstrap4.html">Bootstrap 4</a>
+							</li>
+							<li>
+								<a href="../styling/foundation.html">Foundation</a>
+							</li>
+							<li>
+								<a href="../styling/semanticui.html">Semantic UI</a>
+							</li>
+							<li>
+								<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="./index.html">Data sources</a></h3>
+						<ul class="toc active">
+							<li>
+								<a href="./dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li class="active">
+								<a href="./ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="./js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="./server_side.html">Server-side processing</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../api/index.html">API</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../ajax/index.html">Ajax</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../ajax/simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="../ajax/null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="../ajax/custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../server_side/index.html">Server-side</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../server_side/simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="../server_side/custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="../server_side/post.html">POST data</a>
+							</li>
+							<li>
+								<a href="../server_side/ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="../server_side/object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="../server_side/row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="../server_side/select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="../server_side/jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="../server_side/defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
+							</li>
+						</ul>
+					</div>
+					<div class="toc-group">
+						<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
+						<ul class="toc">
+							<li>
+								<a href="../plug-ins/api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
+							</li>
+						</ul>
+					</div>
+				</div>
+				<div class="epilogue">
+					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
+					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
+					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
 			</div>
 		</div>
-	</body>
+	</section>
+</body>
 </html>