Add legacy note to repo

Update license.txt

.datatables-commit-sync

@@ -1 +1 @@
-ab72434b27d860f3725fa93ccb5a85bec7b14e6f
+561f618389f1dc30eef9c4622a5d32a1c6f73d31

.gitignore

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

Contributing.md

@@ -1,9 +1,18 @@
-# Contributing
+# 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. 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).
+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

@@ -1,3 +1,11 @@
+# Legacy repository
+
+Please note that this is a **legacy repo** for DataTables. The main source repo [is DataTables/DataTablesSrc](https://github.com/DataTables/DataTablesSrc).
+
+Our distribution repos (for NPM, Nuget, etc packages) are the `DataTables/Dist-*` repos - e.g. [DataTables/Dist-DataTables](https://github.com/DataTables/Dist-DataTables). Each distribution repo has a core Javascript file or styling for DataTables or an extension. Please use our [download builder](https://datatables.net/download) to obtain the files you need, including for NPM, Nuget, CDN and download.
+
+
+
 # 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:
@@ -11,16 +19,15 @@ To meet this goal, DataTables is developed with two distinct groups of users in
 * 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.
 
 
-## Installation
+## Installing DataTables
 
-In most cases, to use DataTables all you need to do is include jQuery, the DataTables Javascript and DataTables CSS files in your HTML page:
+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.
 
-```html
-<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/latest/jquery.dataTables.css">
+### NPM and Bower
 
-<script type="text/javascript" language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
-<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.0/jquery.dataTables.js"></script>
-```
+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
@@ -47,7 +54,7 @@ A full list of the options available for DataTables are available in the [docume
 
 ## Documentation
 
-Full documentation of the DataTables options, API and pug-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.
+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
@@ -57,4 +64,4 @@ Support for DataTables is available through the [DataTables forums](//datatables
 
 ## 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 `/*!`.
+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 `/*!`).

bower.json

@@ -1,11 +1,31 @@
 {
-	"name": "DataTables",
-	"version": "1.10.0-dev",
+	"name": "datatables",
 	"main": [
 		"media/js/jquery.dataTables.js",
-		"media/css/jquery.dataTables.css"
+		"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

@@ -1,6 +1,6 @@
 {
 	"name": "datatables/datatables",
-	"version": "1.10.0-dev",
+	"version": "1.10.21",
 	"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", 
@@ -12,4 +12,4 @@
 		"forum": "https://datatables.net/forums",
 		"source": "https://github.com/DataTables/DataTablesSrc/"
 	}
-}
+}

dataTables.jquery.json

@@ -1,6 +1,6 @@
 {
 	"name": "DataTables",
-	"version": "1.10.0-dev",
+	"version": "1.10.21",
 	"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/",
@@ -29,4 +29,4 @@
 		"page",
 		"internationalisable"
 	]
-}
+}

examples/advanced_init/html5-data-options.html

@@ -0,0 +1,905 @@
+<!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.5.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.5.1.js">https://code.jquery.com/jquery-3.5.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/data_rendering.html">Data rendering</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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li class="active">
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</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-2020<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/index.html

@@ -3,67 +3,91 @@
 <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.5.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>
-
+			<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>
+				<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 Init</a></h3>
+						<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 (rowspan / colspan)</a></li>
-							<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/object_dom_read.html

@@ -0,0 +1,929 @@
+<!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.5.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>Sydney</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>Sydney</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.5.1.js">https://code.jquery.com/jquery-3.5.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/data_rendering.html">Data rendering</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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</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-2020<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_flat.html

@@ -3,22 +3,22 @@
 <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="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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( {
+	$('#example').DataTable( {
 		"ajax": {
 			"url": "data/objects_root_array.txt",
 			"dataSrc": ""
@@ -36,38 +36,28 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Flat array data source</span></h1>
-
+			<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a>
-				initiation option.</p>
-
-				<p>The <a href="//datatables.net/init/ajax.dataSrc"><code class="option" title=
-				"Initialisation option">ajax.dataSrc</code></a> has a number of ways in which it can be used:</p>
-
-				<ul>
-					<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>
+				<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/init/ajax.dataSrc"><code class="option" title=
-				"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>
+				<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>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -78,7 +68,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -90,20 +79,17 @@ $(document).ready(function() {
 					</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>
-					<pre class="brush: js;">
-$(document).ready(function() {
-	$('#example').dataTable( {
+					<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;
@@ -117,207 +103,366 @@ $(document).ready(function() {
 			{ &quot;data&quot;: &quot;salary&quot; }
 		]
 	} );
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-
-</pre>
+						<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>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
 						<ul class="toc">
-							<li><a href="../data_sources/dom.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>
+							<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="./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>
+							<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>
+						<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>
+							<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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/custom_data_property.html

@@ -3,22 +3,22 @@
 <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="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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( {
+	$('#example').DataTable( {
 		"ajax": {
 			"url": "data/arrays_custom_prop.txt",
 			"dataSrc": "demo"
@@ -28,39 +28,29 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Custom data source property</span></h1>
-
+			<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 change by using the <code>dataSrc</code> option of the <a href=
-				"//datatables.net/init/ajax"><code class="option" title="Initialisation option">ajax</code></a>
-				initiation option.</p>
-
-				<p>The <a href="//datatables.net/init/ajax.dataSrc"><code class="option" title=
-				"Initialisation option">ajax.dataSrc</code></a> has a number of ways in which it can be used:</p>
-
-				<ul>
-					<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>
+				<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/init/ajax.dataSrc"><code class="option" title=
-				"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, included a nested property by using standard dotted Javascript object notation.</p>
+				<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>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -71,7 +61,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -83,227 +72,382 @@ $(document).ready(function() {
 					</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>
-					<pre class="brush: js;">
-$(document).ready(function() {
-	$('#example').dataTable( {
+					<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;
 		}
 	} );
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-
-</pre>
+						<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>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
 						<ul class="toc">
-							<li><a href="../data_sources/dom.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>
+							<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="./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>
+							<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>
+						<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>
+							<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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/data/arrays.txt

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

examples/ajax/data/arrays_custom_prop.txt

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

examples/ajax/data/arrays_subobjects.txt

@@ -4,7 +4,7 @@
             "0": "Tiger Nixon",
             "hr": {
                 "position": "System Architect",
-                "salary": "$3,120",
+                "salary": "$320,800",
                 "start_date": "2011\/04\/25"
             },
             "contact": {
@@ -15,20 +15,20 @@
         {
             "0": "Garrett Winters",
             "hr": {
-                "position": "Director",
-                "salary": "$5,300",
+                "position": "Accountant",
+                "salary": "$170,750",
                 "start_date": "2011\/07\/25"
             },
             "contact": {
-                "office": "Edinburgh",
+                "office": "Tokyo",
                 "extn": "8422"
             }
         },
         {
             "0": "Ashton Cox",
             "hr": {
-                "position": "Technical Author",
-                "salary": "$4,800",
+                "position": "Junior Technical Author",
+                "salary": "$86,000",
                 "start_date": "2009\/01\/12"
             },
             "contact": {
@@ -39,8 +39,8 @@
         {
             "0": "Cedric Kelly",
             "hr": {
-                "position": "Javascript Developer",
-                "salary": "$3,600",
+                "position": "Senior Javascript Developer",
+                "salary": "$433,060",
                 "start_date": "2012\/03\/29"
             },
             "contact": {
@@ -49,14 +49,14 @@
             }
         },
         {
-            "0": "Jenna Elliott",
+            "0": "Airi Satou",
             "hr": {
-                "position": "Financial Controller",
-                "salary": "$5,300",
+                "position": "Accountant",
+                "salary": "$162,700",
                 "start_date": "2008\/11\/28"
             },
             "contact": {
-                "office": "Edinburgh",
+                "office": "Tokyo",
                 "extn": "5407"
             }
         },
@@ -64,7 +64,7 @@
             "0": "Brielle Williamson",
             "hr": {
                 "position": "Integration Specialist",
-                "salary": "$4,525",
+                "salary": "$372,000",
                 "start_date": "2012\/12\/02"
             },
             "contact": {
@@ -76,7 +76,7 @@
             "0": "Herrod Chandler",
             "hr": {
                 "position": "Sales Assistant",
-                "salary": "$4,080",
+                "salary": "$137,500",
                 "start_date": "2012\/08\/06"
             },
             "contact": {
@@ -88,11 +88,11 @@
             "0": "Rhona Davidson",
             "hr": {
                 "position": "Integration Specialist",
-                "salary": "$6,730",
+                "salary": "$327,900",
                 "start_date": "2010\/10\/14"
             },
             "contact": {
-                "office": "Edinburgh",
+                "office": "Tokyo",
                 "extn": "6200"
             }
         },
@@ -100,7 +100,7 @@
             "0": "Colleen Hurst",
             "hr": {
                 "position": "Javascript Developer",
-                "salary": "$5,000",
+                "salary": "$205,500",
                 "start_date": "2009\/09\/15"
             },
             "contact": {
@@ -112,7 +112,7 @@
             "0": "Sonya Frost",
             "hr": {
                 "position": "Software Engineer",
-                "salary": "$3,600",
+                "salary": "$103,600",
                 "start_date": "2008\/12\/13"
             },
             "contact": {
@@ -123,8 +123,8 @@
         {
             "0": "Jena Gaines",
             "hr": {
-                "position": "System Architect",
-                "salary": "$5,000",
+                "position": "Office Manager",
+                "salary": "$90,560",
                 "start_date": "2008\/12\/19"
             },
             "contact": {
@@ -135,8 +135,8 @@
         {
             "0": "Quinn Flynn",
             "hr": {
-                "position": "Financial Controller",
-                "salary": "$4,200",
+                "position": "Support Lead",
+                "salary": "$342,000",
                 "start_date": "2013\/03\/03"
             },
             "contact": {
@@ -148,7 +148,7 @@
             "0": "Charde Marshall",
             "hr": {
                 "position": "Regional Director",
-                "salary": "$5,300",
+                "salary": "$470,600",
                 "start_date": "2008\/10\/16"
             },
             "contact": {
@@ -160,7 +160,7 @@
             "0": "Haley Kennedy",
             "hr": {
                 "position": "Senior Marketing Designer",
-                "salary": "$4,800",
+                "salary": "$313,500",
                 "start_date": "2012\/12\/18"
             },
             "contact": {
@@ -172,7 +172,7 @@
             "0": "Tatyana Fitzpatrick",
             "hr": {
                 "position": "Regional Director",
-                "salary": "$2,875",
+                "salary": "$385,750",
                 "start_date": "2010\/03\/17"
             },
             "contact": {
@@ -183,8 +183,8 @@
         {
             "0": "Michael Silva",
             "hr": {
-                "position": "Senior Marketing Designer",
-                "salary": "$3,750",
+                "position": "Marketing Designer",
+                "salary": "$198,500",
                 "start_date": "2012\/11\/27"
             },
             "contact": {
@@ -195,8 +195,8 @@
         {
             "0": "Paul Byrd",
             "hr": {
-                "position": "Javascript Developer",
-                "salary": "$5,000",
+                "position": "Chief Financial Officer (CFO)",
+                "salary": "$725,000",
                 "start_date": "2010\/06\/09"
             },
             "contact": {
@@ -208,7 +208,7 @@
             "0": "Gloria Little",
             "hr": {
                 "position": "Systems Administrator",
-                "salary": "$3,120",
+                "salary": "$237,500",
                 "start_date": "2009\/04\/10"
             },
             "contact": {
@@ -220,7 +220,7 @@
             "0": "Bradley Greer",
             "hr": {
                 "position": "Software Engineer",
-                "salary": "$3,120",
+                "salary": "$132,000",
                 "start_date": "2012\/10\/13"
             },
             "contact": {
@@ -231,8 +231,8 @@
         {
             "0": "Dai Rios",
             "hr": {
-                "position": "System Architect",
-                "salary": "$4,200",
+                "position": "Personnel Lead",
+                "salary": "$217,500",
                 "start_date": "2012\/09\/26"
             },
             "contact": {
@@ -243,8 +243,8 @@
         {
             "0": "Jenette Caldwell",
             "hr": {
-                "position": "Financial Controller",
-                "salary": "$4,965",
+                "position": "Development Lead",
+                "salary": "$345,000",
                 "start_date": "2011\/09\/03"
             },
             "contact": {
@@ -255,8 +255,8 @@
         {
             "0": "Yuri Berry",
             "hr": {
-                "position": "System Architect",
-                "salary": "$3,600",
+                "position": "Chief Marketing Officer (CMO)",
+                "salary": "$675,000",
                 "start_date": "2009\/06\/25"
             },
             "contact": {
@@ -267,8 +267,8 @@
         {
             "0": "Caesar Vance",
             "hr": {
-                "position": "Technical Author",
-                "salary": "$4,965",
+                "position": "Pre-Sales Support",
+                "salary": "$106,450",
                 "start_date": "2011\/12\/12"
             },
             "contact": {
@@ -280,19 +280,19 @@
             "0": "Doris Wilder",
             "hr": {
                 "position": "Sales Assistant",
-                "salary": "$4,965",
+                "salary": "$85,600",
                 "start_date": "2010\/09\/20"
             },
             "contact": {
-                "office": "Edinburgh",
+                "office": "Sydney",
                 "extn": "3023"
             }
         },
         {
             "0": "Angelica Ramos",
             "hr": {
-                "position": "System Architect",
-                "salary": "$2,875",
+                "position": "Chief Executive Officer (CEO)",
+                "salary": "$1,200,000",
                 "start_date": "2009\/10\/09"
             },
             "contact": {
@@ -304,7 +304,7 @@
             "0": "Gavin Joyce",
             "hr": {
                 "position": "Developer",
-                "salary": "$4,525",
+                "salary": "$92,575",
                 "start_date": "2010\/12\/22"
             },
             "contact": {
@@ -316,11 +316,11 @@
             "0": "Jennifer Chang",
             "hr": {
                 "position": "Regional Director",
-                "salary": "$4,080",
+                "salary": "$357,650",
                 "start_date": "2010\/11\/14"
             },
             "contact": {
-                "office": "London",
+                "office": "Singapore",
                 "extn": "9239"
             }
         },
@@ -328,7 +328,7 @@
             "0": "Brenden Wagner",
             "hr": {
                 "position": "Software Engineer",
-                "salary": "$3,750",
+                "salary": "$206,850",
                 "start_date": "2011\/06\/07"
             },
             "contact": {
@@ -337,10 +337,10 @@
             }
         },
         {
-            "0": "Ebony Grimes",
+            "0": "Fiona Green",
             "hr": {
-                "position": "Software Engineer",
-                "salary": "$2,875",
+                "position": "Chief Operating Officer (COO)",
+                "salary": "$850,000",
                 "start_date": "2010\/03\/11"
             },
             "contact": {
@@ -349,14 +349,14 @@
             }
         },
         {
-            "0": "Russell Chavez",
+            "0": "Shou Itou",
             "hr": {
-                "position": "Director",
-                "salary": "$3,600",
+                "position": "Regional Marketing",
+                "salary": "$163,000",
                 "start_date": "2011\/08\/14"
             },
             "contact": {
-                "office": "Edinburgh",
+                "office": "Tokyo",
                 "extn": "8899"
             }
         },
@@ -364,11 +364,11 @@
             "0": "Michelle House",
             "hr": {
                 "position": "Integration Specialist",
-                "salary": "$3,750",
+                "salary": "$95,400",
                 "start_date": "2011\/06\/02"
             },
             "contact": {
-                "office": "Edinburgh",
+                "office": "Sydney",
                 "extn": "2769"
             }
         },
@@ -376,7 +376,7 @@
             "0": "Suki Burks",
             "hr": {
                 "position": "Developer",
-                "salary": "$2,875",
+                "salary": "$114,500",
                 "start_date": "2009\/10\/22"
             },
             "contact": {
@@ -388,7 +388,7 @@
             "0": "Prescott Bartlett",
             "hr": {
                 "position": "Technical Author",
-                "salary": "$6,730",
+                "salary": "$145,000",
                 "start_date": "2011\/05\/07"
             },
             "contact": {
@@ -399,8 +399,8 @@
         {
             "0": "Gavin Cortez",
             "hr": {
-                "position": "Technical Author",
-                "salary": "$6,730",
+                "position": "Team Leader",
+                "salary": "$235,500",
                 "start_date": "2008\/10\/26"
             },
             "contact": {
@@ -411,8 +411,8 @@
         {
             "0": "Martena Mccray",
             "hr": {
-                "position": "Integration Specialist",
-                "salary": "$4,080",
+                "position": "Post-Sales support",
+                "salary": "$324,050",
                 "start_date": "2011\/03\/09"
             },
             "contact": {
@@ -423,8 +423,8 @@
         {
             "0": "Unity Butler",
             "hr": {
-                "position": "Senior Marketing Designer",
-                "salary": "$3,750",
+                "position": "Marketing Designer",
+                "salary": "$85,675",
                 "start_date": "2009\/12\/09"
             },
             "contact": {
@@ -435,8 +435,8 @@
         {
             "0": "Howard Hatfield",
             "hr": {
-                "position": "Financial Controller",
-                "salary": "$4,080",
+                "position": "Office Manager",
+                "salary": "$164,500",
                 "start_date": "2008\/12\/16"
             },
             "contact": {
@@ -447,8 +447,8 @@
         {
             "0": "Hope Fuentes",
             "hr": {
-                "position": "Financial Controller",
-                "salary": "$4,200",
+                "position": "Secretary",
+                "salary": "$109,850",
                 "start_date": "2010\/02\/12"
             },
             "contact": {
@@ -459,8 +459,8 @@
         {
             "0": "Vivian Harrell",
             "hr": {
-                "position": "System Architect",
-                "salary": "$4,965",
+                "position": "Financial Controller",
+                "salary": "$452,500",
                 "start_date": "2009\/02\/14"
             },
             "contact": {
@@ -471,8 +471,8 @@
         {
             "0": "Timothy Mooney",
             "hr": {
-                "position": "Financial Controller",
-                "salary": "$4,200",
+                "position": "Office Manager",
+                "salary": "$136,200",
                 "start_date": "2008\/12\/11"
             },
             "contact": {
@@ -484,7 +484,7 @@
             "0": "Jackson Bradshaw",
             "hr": {
                 "position": "Director",
-                "salary": "$5,000",
+                "salary": "$645,750",
                 "start_date": "2008\/09\/26"
             },
             "contact": {
@@ -493,14 +493,14 @@
             }
         },
         {
-            "0": "Miriam Weiss",
+            "0": "Olivia Liang",
             "hr": {
                 "position": "Support Engineer",
-                "salary": "$4,965",
+                "salary": "$234,500",
                 "start_date": "2011\/02\/03"
             },
             "contact": {
-                "office": "Edinburgh",
+                "office": "Singapore",
                 "extn": "2120"
             }
         },
@@ -508,7 +508,7 @@
             "0": "Bruno Nash",
             "hr": {
                 "position": "Software Engineer",
-                "salary": "$4,200",
+                "salary": "$163,500",
                 "start_date": "2011\/05\/03"
             },
             "contact": {
@@ -517,14 +517,14 @@
             }
         },
         {
-            "0": "Odessa Jackson",
+            "0": "Sakura Yamamoto",
             "hr": {
                 "position": "Support Engineer",
-                "salary": "$3,600",
+                "salary": "$139,575",
                 "start_date": "2009\/08\/19"
             },
             "contact": {
-                "office": "Edinburgh",
+                "office": "Tokyo",
                 "extn": "9383"
             }
         },
@@ -532,7 +532,7 @@
             "0": "Thor Walton",
             "hr": {
                 "position": "Developer",
-                "salary": "$3,600",
+                "salary": "$98,540",
                 "start_date": "2013\/08\/11"
             },
             "contact": {
@@ -544,7 +544,7 @@
             "0": "Finn Camacho",
             "hr": {
                 "position": "Support Engineer",
-                "salary": "$4,800",
+                "salary": "$87,500",
                 "start_date": "2009\/07\/07"
             },
             "contact": {
@@ -553,14 +553,14 @@
             }
         },
         {
-            "0": "Elton Baldwin",
+            "0": "Serge Baldwin",
             "hr": {
                 "position": "Data Coordinator",
-                "salary": "$6,730",
+                "salary": "$138,575",
                 "start_date": "2012\/04\/09"
             },
             "contact": {
-                "office": "Edinburgh",
+                "office": "Singapore",
                 "extn": "8352"
             }
         },
@@ -568,7 +568,7 @@
             "0": "Zenaida Frank",
             "hr": {
                 "position": "Software Engineer",
-                "salary": "$4,800",
+                "salary": "$125,250",
                 "start_date": "2010\/01\/04"
             },
             "contact": {
@@ -580,7 +580,7 @@
             "0": "Zorita Serrano",
             "hr": {
                 "position": "Software Engineer",
-                "salary": "$5,300",
+                "salary": "$115,000",
                 "start_date": "2012\/06\/01"
             },
             "contact": {
@@ -591,8 +591,8 @@
         {
             "0": "Jennifer Acosta",
             "hr": {
-                "position": "Javascript Developer",
-                "salary": "$2,875",
+                "position": "Junior Javascript Developer",
+                "salary": "$75,650",
                 "start_date": "2013\/02\/01"
             },
             "contact": {
@@ -604,7 +604,7 @@
             "0": "Cara Stevens",
             "hr": {
                 "position": "Sales Assistant",
-                "salary": "$4,800",
+                "salary": "$145,600",
                 "start_date": "2011\/12\/06"
             },
             "contact": {
@@ -615,8 +615,8 @@
         {
             "0": "Hermione Butler",
             "hr": {
-                "position": "Director",
-                "salary": "$4,080",
+                "position": "Regional Director",
+                "salary": "$356,250",
                 "start_date": "2011\/03\/21"
             },
             "contact": {
@@ -628,7 +628,7 @@
             "0": "Lael Greer",
             "hr": {
                 "position": "Systems Administrator",
-                "salary": "$3,120",
+                "salary": "$103,500",
                 "start_date": "2009\/02\/27"
             },
             "contact": {
@@ -640,7 +640,7 @@
             "0": "Jonas Alexander",
             "hr": {
                 "position": "Developer",
-                "salary": "$5,300",
+                "salary": "$86,500",
                 "start_date": "2010\/07\/14"
             },
             "contact": {
@@ -652,7 +652,7 @@
             "0": "Shad Decker",
             "hr": {
                 "position": "Regional Director",
-                "salary": "$5,300",
+                "salary": "$183,000",
                 "start_date": "2008\/11\/13"
             },
             "contact": {
@@ -664,19 +664,19 @@
             "0": "Michael Bruce",
             "hr": {
                 "position": "Javascript Developer",
-                "salary": "$4,080",
+                "salary": "$183,000",
                 "start_date": "2011\/06\/27"
             },
             "contact": {
-                "office": "Edinburgh",
+                "office": "Singapore",
                 "extn": "5384"
             }
         },
         {
             "0": "Donna Snider",
             "hr": {
-                "position": "System Architect",
-                "salary": "$3,120",
+                "position": "Customer Support",
+                "salary": "$112,000",
                 "start_date": "2011\/01\/25"
             },
             "contact": {

examples/ajax/data/objects.txt

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

examples/ajax/data/objects_deep.txt

@@ -4,7 +4,7 @@
             "name": "Tiger Nixon",
             "hr": {
                 "position": "System Architect",
-                "salary": "$3,120",
+                "salary": "$320,800",
                 "start_date": "2011\/04\/25"
             },
             "contact": [
@@ -15,20 +15,20 @@
         {
             "name": "Garrett Winters",
             "hr": {
-                "position": "Director",
-                "salary": "$5,300",
+                "position": "Accountant",
+                "salary": "$170,750",
                 "start_date": "2011\/07\/25"
             },
             "contact": [
-                "Edinburgh",
+                "Tokyo",
                 "8422"
             ]
         },
         {
             "name": "Ashton Cox",
             "hr": {
-                "position": "Technical Author",
-                "salary": "$4,800",
+                "position": "Junior Technical Author",
+                "salary": "$86,000",
                 "start_date": "2009\/01\/12"
             },
             "contact": [
@@ -39,8 +39,8 @@
         {
             "name": "Cedric Kelly",
             "hr": {
-                "position": "Javascript Developer",
-                "salary": "$3,600",
+                "position": "Senior Javascript Developer",
+                "salary": "$433,060",
                 "start_date": "2012\/03\/29"
             },
             "contact": [
@@ -49,14 +49,14 @@
             ]
         },
         {
-            "name": "Jenna Elliott",
+            "name": "Airi Satou",
             "hr": {
-                "position": "Financial Controller",
-                "salary": "$5,300",
+                "position": "Accountant",
+                "salary": "$162,700",
                 "start_date": "2008\/11\/28"
             },
             "contact": [
-                "Edinburgh",
+                "Tokyo",
                 "5407"
             ]
         },
@@ -64,7 +64,7 @@
             "name": "Brielle Williamson",
             "hr": {
                 "position": "Integration Specialist",
-                "salary": "$4,525",
+                "salary": "$372,000",
                 "start_date": "2012\/12\/02"
             },
             "contact": [
@@ -76,7 +76,7 @@
             "name": "Herrod Chandler",
             "hr": {
                 "position": "Sales Assistant",
-                "salary": "$4,080",
+                "salary": "$137,500",
                 "start_date": "2012\/08\/06"
             },
             "contact": [
@@ -88,11 +88,11 @@
             "name": "Rhona Davidson",
             "hr": {
                 "position": "Integration Specialist",
-                "salary": "$6,730",
+                "salary": "$327,900",
                 "start_date": "2010\/10\/14"
             },
             "contact": [
-                "Edinburgh",
+                "Tokyo",
                 "6200"
             ]
         },
@@ -100,7 +100,7 @@
             "name": "Colleen Hurst",
             "hr": {
                 "position": "Javascript Developer",
-                "salary": "$5,000",
+                "salary": "$205,500",
                 "start_date": "2009\/09\/15"
             },
             "contact": [
@@ -112,7 +112,7 @@
             "name": "Sonya Frost",
             "hr": {
                 "position": "Software Engineer",
-                "salary": "$3,600",
+                "salary": "$103,600",
                 "start_date": "2008\/12\/13"
             },
             "contact": [
@@ -123,8 +123,8 @@
         {
             "name": "Jena Gaines",
             "hr": {
-                "position": "System Architect",
-                "salary": "$5,000",
+                "position": "Office Manager",
+                "salary": "$90,560",
                 "start_date": "2008\/12\/19"
             },
             "contact": [
@@ -135,8 +135,8 @@
         {
             "name": "Quinn Flynn",
             "hr": {
-                "position": "Financial Controller",
-                "salary": "$4,200",
+                "position": "Support Lead",
+                "salary": "$342,000",
                 "start_date": "2013\/03\/03"
             },
             "contact": [
@@ -148,7 +148,7 @@
             "name": "Charde Marshall",
             "hr": {
                 "position": "Regional Director",
-                "salary": "$5,300",
+                "salary": "$470,600",
                 "start_date": "2008\/10\/16"
             },
             "contact": [
@@ -160,7 +160,7 @@
             "name": "Haley Kennedy",
             "hr": {
                 "position": "Senior Marketing Designer",
-                "salary": "$4,800",
+                "salary": "$313,500",
                 "start_date": "2012\/12\/18"
             },
             "contact": [
@@ -172,7 +172,7 @@
             "name": "Tatyana Fitzpatrick",
             "hr": {
                 "position": "Regional Director",
-                "salary": "$2,875",
+                "salary": "$385,750",
                 "start_date": "2010\/03\/17"
             },
             "contact": [
@@ -183,8 +183,8 @@
         {
             "name": "Michael Silva",
             "hr": {
-                "position": "Senior Marketing Designer",
-                "salary": "$3,750",
+                "position": "Marketing Designer",
+                "salary": "$198,500",
                 "start_date": "2012\/11\/27"
             },
             "contact": [
@@ -195,8 +195,8 @@
         {
             "name": "Paul Byrd",
             "hr": {
-                "position": "Javascript Developer",
-                "salary": "$5,000",
+                "position": "Chief Financial Officer (CFO)",
+                "salary": "$725,000",
                 "start_date": "2010\/06\/09"
             },
             "contact": [
@@ -208,7 +208,7 @@
             "name": "Gloria Little",
             "hr": {
                 "position": "Systems Administrator",
-                "salary": "$3,120",
+                "salary": "$237,500",
                 "start_date": "2009\/04\/10"
             },
             "contact": [
@@ -220,7 +220,7 @@
             "name": "Bradley Greer",
             "hr": {
                 "position": "Software Engineer",
-                "salary": "$3,120",
+                "salary": "$132,000",
                 "start_date": "2012\/10\/13"
             },
             "contact": [
@@ -231,8 +231,8 @@
         {
             "name": "Dai Rios",
             "hr": {
-                "position": "System Architect",
-                "salary": "$4,200",
+                "position": "Personnel Lead",
+                "salary": "$217,500",
                 "start_date": "2012\/09\/26"
             },
             "contact": [
@@ -243,8 +243,8 @@
         {
             "name": "Jenette Caldwell",
             "hr": {
-                "position": "Financial Controller",
-                "salary": "$4,965",
+                "position": "Development Lead",
+                "salary": "$345,000",
                 "start_date": "2011\/09\/03"
             },
             "contact": [
@@ -255,8 +255,8 @@
         {
             "name": "Yuri Berry",
             "hr": {
-                "position": "System Architect",
-                "salary": "$3,600",
+                "position": "Chief Marketing Officer (CMO)",
+                "salary": "$675,000",
                 "start_date": "2009\/06\/25"
             },
             "contact": [
@@ -267,8 +267,8 @@
         {
             "name": "Caesar Vance",
             "hr": {
-                "position": "Technical Author",
-                "salary": "$4,965",
+                "position": "Pre-Sales Support",
+                "salary": "$106,450",
                 "start_date": "2011\/12\/12"
             },
             "contact": [
@@ -280,19 +280,19 @@
             "name": "Doris Wilder",
             "hr": {
                 "position": "Sales Assistant",
-                "salary": "$4,965",
+                "salary": "$85,600",
                 "start_date": "2010\/09\/20"
             },
             "contact": [
-                "Edinburgh",
+                "Sydney",
                 "3023"
             ]
         },
         {
             "name": "Angelica Ramos",
             "hr": {
-                "position": "System Architect",
-                "salary": "$2,875",
+                "position": "Chief Executive Officer (CEO)",
+                "salary": "$1,200,000",
                 "start_date": "2009\/10\/09"
             },
             "contact": [
@@ -304,7 +304,7 @@
             "name": "Gavin Joyce",
             "hr": {
                 "position": "Developer",
-                "salary": "$4,525",
+                "salary": "$92,575",
                 "start_date": "2010\/12\/22"
             },
             "contact": [
@@ -316,11 +316,11 @@
             "name": "Jennifer Chang",
             "hr": {
                 "position": "Regional Director",
-                "salary": "$4,080",
+                "salary": "$357,650",
                 "start_date": "2010\/11\/14"
             },
             "contact": [
-                "London",
+                "Singapore",
                 "9239"
             ]
         },
@@ -328,7 +328,7 @@
             "name": "Brenden Wagner",
             "hr": {
                 "position": "Software Engineer",
-                "salary": "$3,750",
+                "salary": "$206,850",
                 "start_date": "2011\/06\/07"
             },
             "contact": [
@@ -337,10 +337,10 @@
             ]
         },
         {
-            "name": "Ebony Grimes",
+            "name": "Fiona Green",
             "hr": {
-                "position": "Software Engineer",
-                "salary": "$2,875",
+                "position": "Chief Operating Officer (COO)",
+                "salary": "$850,000",
                 "start_date": "2010\/03\/11"
             },
             "contact": [
@@ -349,14 +349,14 @@
             ]
         },
         {
-            "name": "Russell Chavez",
+            "name": "Shou Itou",
             "hr": {
-                "position": "Director",
-                "salary": "$3,600",
+                "position": "Regional Marketing",
+                "salary": "$163,000",
                 "start_date": "2011\/08\/14"
             },
             "contact": [
-                "Edinburgh",
+                "Tokyo",
                 "8899"
             ]
         },
@@ -364,11 +364,11 @@
             "name": "Michelle House",
             "hr": {
                 "position": "Integration Specialist",
-                "salary": "$3,750",
+                "salary": "$95,400",
                 "start_date": "2011\/06\/02"
             },
             "contact": [
-                "Edinburgh",
+                "Sydney",
                 "2769"
             ]
         },
@@ -376,7 +376,7 @@
             "name": "Suki Burks",
             "hr": {
                 "position": "Developer",
-                "salary": "$2,875",
+                "salary": "$114,500",
                 "start_date": "2009\/10\/22"
             },
             "contact": [
@@ -388,7 +388,7 @@
             "name": "Prescott Bartlett",
             "hr": {
                 "position": "Technical Author",
-                "salary": "$6,730",
+                "salary": "$145,000",
                 "start_date": "2011\/05\/07"
             },
             "contact": [
@@ -399,8 +399,8 @@
         {
             "name": "Gavin Cortez",
             "hr": {
-                "position": "Technical Author",
-                "salary": "$6,730",
+                "position": "Team Leader",
+                "salary": "$235,500",
                 "start_date": "2008\/10\/26"
             },
             "contact": [
@@ -411,8 +411,8 @@
         {
             "name": "Martena Mccray",
             "hr": {
-                "position": "Integration Specialist",
-                "salary": "$4,080",
+                "position": "Post-Sales support",
+                "salary": "$324,050",
                 "start_date": "2011\/03\/09"
             },
             "contact": [
@@ -423,8 +423,8 @@
         {
             "name": "Unity Butler",
             "hr": {
-                "position": "Senior Marketing Designer",
-                "salary": "$3,750",
+                "position": "Marketing Designer",
+                "salary": "$85,675",
                 "start_date": "2009\/12\/09"
             },
             "contact": [
@@ -435,8 +435,8 @@
         {
             "name": "Howard Hatfield",
             "hr": {
-                "position": "Financial Controller",
-                "salary": "$4,080",
+                "position": "Office Manager",
+                "salary": "$164,500",
                 "start_date": "2008\/12\/16"
             },
             "contact": [
@@ -447,8 +447,8 @@
         {
             "name": "Hope Fuentes",
             "hr": {
-                "position": "Financial Controller",
-                "salary": "$4,200",
+                "position": "Secretary",
+                "salary": "$109,850",
                 "start_date": "2010\/02\/12"
             },
             "contact": [
@@ -459,8 +459,8 @@
         {
             "name": "Vivian Harrell",
             "hr": {
-                "position": "System Architect",
-                "salary": "$4,965",
+                "position": "Financial Controller",
+                "salary": "$452,500",
                 "start_date": "2009\/02\/14"
             },
             "contact": [
@@ -471,8 +471,8 @@
         {
             "name": "Timothy Mooney",
             "hr": {
-                "position": "Financial Controller",
-                "salary": "$4,200",
+                "position": "Office Manager",
+                "salary": "$136,200",
                 "start_date": "2008\/12\/11"
             },
             "contact": [
@@ -484,7 +484,7 @@
             "name": "Jackson Bradshaw",
             "hr": {
                 "position": "Director",
-                "salary": "$5,000",
+                "salary": "$645,750",
                 "start_date": "2008\/09\/26"
             },
             "contact": [
@@ -493,14 +493,14 @@
             ]
         },
         {
-            "name": "Miriam Weiss",
+            "name": "Olivia Liang",
             "hr": {
                 "position": "Support Engineer",
-                "salary": "$4,965",
+                "salary": "$234,500",
                 "start_date": "2011\/02\/03"
             },
             "contact": [
-                "Edinburgh",
+                "Singapore",
                 "2120"
             ]
         },
@@ -508,7 +508,7 @@
             "name": "Bruno Nash",
             "hr": {
                 "position": "Software Engineer",
-                "salary": "$4,200",
+                "salary": "$163,500",
                 "start_date": "2011\/05\/03"
             },
             "contact": [
@@ -517,14 +517,14 @@
             ]
         },
         {
-            "name": "Odessa Jackson",
+            "name": "Sakura Yamamoto",
             "hr": {
                 "position": "Support Engineer",
-                "salary": "$3,600",
+                "salary": "$139,575",
                 "start_date": "2009\/08\/19"
             },
             "contact": [
-                "Edinburgh",
+                "Tokyo",
                 "9383"
             ]
         },
@@ -532,7 +532,7 @@
             "name": "Thor Walton",
             "hr": {
                 "position": "Developer",
-                "salary": "$3,600",
+                "salary": "$98,540",
                 "start_date": "2013\/08\/11"
             },
             "contact": [
@@ -544,7 +544,7 @@
             "name": "Finn Camacho",
             "hr": {
                 "position": "Support Engineer",
-                "salary": "$4,800",
+                "salary": "$87,500",
                 "start_date": "2009\/07\/07"
             },
             "contact": [
@@ -553,14 +553,14 @@
             ]
         },
         {
-            "name": "Elton Baldwin",
+            "name": "Serge Baldwin",
             "hr": {
                 "position": "Data Coordinator",
-                "salary": "$6,730",
+                "salary": "$138,575",
                 "start_date": "2012\/04\/09"
             },
             "contact": [
-                "Edinburgh",
+                "Singapore",
                 "8352"
             ]
         },
@@ -568,7 +568,7 @@
             "name": "Zenaida Frank",
             "hr": {
                 "position": "Software Engineer",
-                "salary": "$4,800",
+                "salary": "$125,250",
                 "start_date": "2010\/01\/04"
             },
             "contact": [
@@ -580,7 +580,7 @@
             "name": "Zorita Serrano",
             "hr": {
                 "position": "Software Engineer",
-                "salary": "$5,300",
+                "salary": "$115,000",
                 "start_date": "2012\/06\/01"
             },
             "contact": [
@@ -591,8 +591,8 @@
         {
             "name": "Jennifer Acosta",
             "hr": {
-                "position": "Javascript Developer",
-                "salary": "$2,875",
+                "position": "Junior Javascript Developer",
+                "salary": "$75,650",
                 "start_date": "2013\/02\/01"
             },
             "contact": [
@@ -604,7 +604,7 @@
             "name": "Cara Stevens",
             "hr": {
                 "position": "Sales Assistant",
-                "salary": "$4,800",
+                "salary": "$145,600",
                 "start_date": "2011\/12\/06"
             },
             "contact": [
@@ -615,8 +615,8 @@
         {
             "name": "Hermione Butler",
             "hr": {
-                "position": "Director",
-                "salary": "$4,080",
+                "position": "Regional Director",
+                "salary": "$356,250",
                 "start_date": "2011\/03\/21"
             },
             "contact": [
@@ -628,7 +628,7 @@
             "name": "Lael Greer",
             "hr": {
                 "position": "Systems Administrator",
-                "salary": "$3,120",
+                "salary": "$103,500",
                 "start_date": "2009\/02\/27"
             },
             "contact": [
@@ -640,7 +640,7 @@
             "name": "Jonas Alexander",
             "hr": {
                 "position": "Developer",
-                "salary": "$5,300",
+                "salary": "$86,500",
                 "start_date": "2010\/07\/14"
             },
             "contact": [
@@ -652,7 +652,7 @@
             "name": "Shad Decker",
             "hr": {
                 "position": "Regional Director",
-                "salary": "$5,300",
+                "salary": "$183,000",
                 "start_date": "2008\/11\/13"
             },
             "contact": [
@@ -664,19 +664,19 @@
             "name": "Michael Bruce",
             "hr": {
                 "position": "Javascript Developer",
-                "salary": "$4,080",
+                "salary": "$183,000",
                 "start_date": "2011\/06\/27"
             },
             "contact": [
-                "Edinburgh",
+                "Singapore",
                 "5384"
             ]
         },
         {
             "name": "Donna Snider",
             "hr": {
-                "position": "System Architect",
-                "salary": "$3,120",
+                "position": "Customer Support",
+                "salary": "$112,000",
                 "start_date": "2011\/01\/25"
             },
             "contact": [

examples/ajax/data/objects_root_array.txt

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

examples/ajax/data/objects_salary.txt

@@ -0,0 +1,460 @@
+{
+    "data": [
+        {
+            "name": "Tiger Nixon",
+            "position": "System Architect",
+            "salary": "320800",
+            "start_date": "2011\/04\/25",
+            "office": "Edinburgh",
+            "extn": "5421"
+        },
+        {
+            "name": "Garrett Winters",
+            "position": "Accountant",
+            "salary": "170750",
+            "start_date": "2011\/07\/25",
+            "office": "Tokyo",
+            "extn": "8422"
+        },
+        {
+            "name": "Ashton Cox",
+            "position": "Junior Technical Author",
+            "salary": "86000",
+            "start_date": "2009\/01\/12",
+            "office": "San Francisco",
+            "extn": "1562"
+        },
+        {
+            "name": "Cedric Kelly",
+            "position": "Senior Javascript Developer",
+            "salary": "433060",
+            "start_date": "2012\/03\/29",
+            "office": "Edinburgh",
+            "extn": "6224"
+        },
+        {
+            "name": "Airi Satou",
+            "position": "Accountant",
+            "salary": "162700",
+            "start_date": "2008\/11\/28",
+            "office": "Tokyo",
+            "extn": "5407"
+        },
+        {
+            "name": "Brielle Williamson",
+            "position": "Integration Specialist",
+            "salary": "372000",
+            "start_date": "2012\/12\/02",
+            "office": "New York",
+            "extn": "4804"
+        },
+        {
+            "name": "Herrod Chandler",
+            "position": "Sales Assistant",
+            "salary": "137500",
+            "start_date": "2012\/08\/06",
+            "office": "San Francisco",
+            "extn": "9608"
+        },
+        {
+            "name": "Rhona Davidson",
+            "position": "Integration Specialist",
+            "salary": "327900",
+            "start_date": "2010\/10\/14",
+            "office": "Tokyo",
+            "extn": "6200"
+        },
+        {
+            "name": "Colleen Hurst",
+            "position": "Javascript Developer",
+            "salary": "205500",
+            "start_date": "2009\/09\/15",
+            "office": "San Francisco",
+            "extn": "2360"
+        },
+        {
+            "name": "Sonya Frost",
+            "position": "Software Engineer",
+            "salary": "103600",
+            "start_date": "2008\/12\/13",
+            "office": "Edinburgh",
+            "extn": "1667"
+        },
+        {
+            "name": "Jena Gaines",
+            "position": "Office Manager",
+            "salary": "90560",
+            "start_date": "2008\/12\/19",
+            "office": "London",
+            "extn": "3814"
+        },
+        {
+            "name": "Quinn Flynn",
+            "position": "Support Lead",
+            "salary": "342000",
+            "start_date": "2013\/03\/03",
+            "office": "Edinburgh",
+            "extn": "9497"
+        },
+        {
+            "name": "Charde Marshall",
+            "position": "Regional Director",
+            "salary": "470600",
+            "start_date": "2008\/10\/16",
+            "office": "San Francisco",
+            "extn": "6741"
+        },
+        {
+            "name": "Haley Kennedy",
+            "position": "Senior Marketing Designer",
+            "salary": "313500",
+            "start_date": "2012\/12\/18",
+            "office": "London",
+            "extn": "3597"
+        },
+        {
+            "name": "Tatyana Fitzpatrick",
+            "position": "Regional Director",
+            "salary": "385750",
+            "start_date": "2010\/03\/17",
+            "office": "London",
+            "extn": "1965"
+        },
+        {
+            "name": "Michael Silva",
+            "position": "Marketing Designer",
+            "salary": "198500",
+            "start_date": "2012\/11\/27",
+            "office": "London",
+            "extn": "1581"
+        },
+        {
+            "name": "Paul Byrd",
+            "position": "Chief Financial Officer (CFO)",
+            "salary": "725000",
+            "start_date": "2010\/06\/09",
+            "office": "New York",
+            "extn": "3059"
+        },
+        {
+            "name": "Gloria Little",
+            "position": "Systems Administrator",
+            "salary": "237500",
+            "start_date": "2009\/04\/10",
+            "office": "New York",
+            "extn": "1721"
+        },
+        {
+            "name": "Bradley Greer",
+            "position": "Software Engineer",
+            "salary": "132000",
+            "start_date": "2012\/10\/13",
+            "office": "London",
+            "extn": "2558"
+        },
+        {
+            "name": "Dai Rios",
+            "position": "Personnel Lead",
+            "salary": "217500",
+            "start_date": "2012\/09\/26",
+            "office": "Edinburgh",
+            "extn": "2290"
+        },
+        {
+            "name": "Jenette Caldwell",
+            "position": "Development Lead",
+            "salary": "345000",
+            "start_date": "2011\/09\/03",
+            "office": "New York",
+            "extn": "1937"
+        },
+        {
+            "name": "Yuri Berry",
+            "position": "Chief Marketing Officer (CMO)",
+            "salary": "675000",
+            "start_date": "2009\/06\/25",
+            "office": "New York",
+            "extn": "6154"
+        },
+        {
+            "name": "Caesar Vance",
+            "position": "Pre-Sales Support",
+            "salary": "106450",
+            "start_date": "2011\/12\/12",
+            "office": "New York",
+            "extn": "8330"
+        },
+        {
+            "name": "Doris Wilder",
+            "position": "Sales Assistant",
+            "salary": "85600",
+            "start_date": "2010\/09\/20",
+            "office": "Sydney",
+            "extn": "3023"
+        },
+        {
+            "name": "Angelica Ramos",
+            "position": "Chief Executive Officer (CEO)",
+            "salary": "1200000",
+            "start_date": "2009\/10\/09",
+            "office": "London",
+            "extn": "5797"
+        },
+        {
+            "name": "Gavin Joyce",
+            "position": "Developer",
+            "salary": "92575",
+            "start_date": "2010\/12\/22",
+            "office": "Edinburgh",
+            "extn": "8822"
+        },
+        {
+            "name": "Jennifer Chang",
+            "position": "Regional Director",
+            "salary": "357650",
+            "start_date": "2010\/11\/14",
+            "office": "Argentina",
+            "extn": "9239"
+        },
+        {
+            "name": "Brenden Wagner",
+            "position": "Software Engineer",
+            "salary": "206850",
+            "start_date": "2011\/06\/07",
+            "office": "San Francisco",
+            "extn": "1314"
+        },
+        {
+            "name": "Fiona Green",
+            "position": "Chief Operating Officer (COO)",
+            "salary": "850000",
+            "start_date": "2010\/03\/11",
+            "office": "San Francisco",
+            "extn": "2947"
+        },
+        {
+            "name": "Shou Itou",
+            "position": "Regional Marketing",
+            "salary": "163000",
+            "start_date": "2011\/08\/14",
+            "office": "Tokyo",
+            "extn": "8899"
+        },
+        {
+            "name": "Michelle House",
+            "position": "Integration Specialist",
+            "salary": "95400",
+            "start_date": "2011\/06\/02",
+            "office": "Sydney",
+            "extn": "2769"
+        },
+        {
+            "name": "Suki Burks",
+            "position": "Developer",
+            "salary": "114500",
+            "start_date": "2009\/10\/22",
+            "office": "London",
+            "extn": "6832"
+        },
+        {
+            "name": "Prescott Bartlett",
+            "position": "Technical Author",
+            "salary": "145000",
+            "start_date": "2011\/05\/07",
+            "office": "London",
+            "extn": "3606"
+        },
+        {
+            "name": "Gavin Cortez",
+            "position": "Team Leader",
+            "salary": "235500",
+            "start_date": "2008\/10\/26",
+            "office": "San Francisco",
+            "extn": "2860"
+        },
+        {
+            "name": "Martena Mccray",
+            "position": "Post-Sales support",
+            "salary": "324050",
+            "start_date": "2011\/03\/09",
+            "office": "Edinburgh",
+            "extn": "8240"
+        },
+        {
+            "name": "Unity Butler",
+            "position": "Marketing Designer",
+            "salary": "85675",
+            "start_date": "2009\/12\/09",
+            "office": "San Francisco",
+            "extn": "5384"
+        },
+        {
+            "name": "Howard Hatfield",
+            "position": "Office Manager",
+            "salary": "164500",
+            "start_date": "2008\/12\/16",
+            "office": "San Francisco",
+            "extn": "7031"
+        },
+        {
+            "name": "Hope Fuentes",
+            "position": "Secretary",
+            "salary": "109850",
+            "start_date": "2010\/02\/12",
+            "office": "San Francisco",
+            "extn": "6318"
+        },
+        {
+            "name": "Vivian Harrell",
+            "position": "Financial Controller",
+            "salary": "452500",
+            "start_date": "2009\/02\/14",
+            "office": "San Francisco",
+            "extn": "9422"
+        },
+        {
+            "name": "Timothy Mooney",
+            "position": "Office Manager",
+            "salary": "136200",
+            "start_date": "2008\/12\/11",
+            "office": "London",
+            "extn": "7580"
+        },
+        {
+            "name": "Jackson Bradshaw",
+            "position": "Director",
+            "salary": "645750",
+            "start_date": "2008\/09\/26",
+            "office": "New York",
+            "extn": "1042"
+        },
+        {
+            "name": "Olivia Liang",
+            "position": "Support Engineer",
+            "salary": "234500",
+            "start_date": "2011\/02\/03",
+            "office": "Argentina",
+            "extn": "2120"
+        },
+        {
+            "name": "Bruno Nash",
+            "position": "Software Engineer",
+            "salary": "163500",
+            "start_date": "2011\/05\/03",
+            "office": "London",
+            "extn": "6222"
+        },
+        {
+            "name": "Sakura Yamamoto",
+            "position": "Support Engineer",
+            "salary": "139575",
+            "start_date": "2009\/08\/19",
+            "office": "Tokyo",
+            "extn": "9383"
+        },
+        {
+            "name": "Thor Walton",
+            "position": "Developer",
+            "salary": "98540",
+            "start_date": "2013\/08\/11",
+            "office": "New York",
+            "extn": "8327"
+        },
+        {
+            "name": "Finn Camacho",
+            "position": "Support Engineer",
+            "salary": "87500",
+            "start_date": "2009\/07\/07",
+            "office": "San Francisco",
+            "extn": "2927"
+        },
+        {
+            "name": "Serge Baldwin",
+            "position": "Data Coordinator",
+            "salary": "138575",
+            "start_date": "2012\/04\/09",
+            "office": "Argentina",
+            "extn": "8352"
+        },
+        {
+            "name": "Zenaida Frank",
+            "position": "Software Engineer",
+            "salary": "125250",
+            "start_date": "2010\/01\/04",
+            "office": "New York",
+            "extn": "7439"
+        },
+        {
+            "name": "Zorita Serrano",
+            "position": "Software Engineer",
+            "salary": "115000",
+            "start_date": "2012\/06\/01",
+            "office": "San Francisco",
+            "extn": "4389"
+        },
+        {
+            "name": "Jennifer Acosta",
+            "position": "Junior Javascript Developer",
+            "salary": "75650",
+            "start_date": "2013\/02\/01",
+            "office": "Edinburgh",
+            "extn": "3431"
+        },
+        {
+            "name": "Cara Stevens",
+            "position": "Sales Assistant",
+            "salary": "145600",
+            "start_date": "2011\/12\/06",
+            "office": "New York",
+            "extn": "3990"
+        },
+        {
+            "name": "Hermione Butler",
+            "position": "Regional Director",
+            "salary": "356250",
+            "start_date": "2011\/03\/21",
+            "office": "London",
+            "extn": "1016"
+        },
+        {
+            "name": "Lael Greer",
+            "position": "Systems Administrator",
+            "salary": "103500",
+            "start_date": "2009\/02\/27",
+            "office": "London",
+            "extn": "6733"
+        },
+        {
+            "name": "Jonas Alexander",
+            "position": "Developer",
+            "salary": "86500",
+            "start_date": "2010\/07\/14",
+            "office": "San Francisco",
+            "extn": "8196"
+        },
+        {
+            "name": "Shad Decker",
+            "position": "Regional Director",
+            "salary": "183000",
+            "start_date": "2008\/11\/13",
+            "office": "Edinburgh",
+            "extn": "6373"
+        },
+        {
+            "name": "Michael Bruce",
+            "position": "Javascript Developer",
+            "salary": "183000",
+            "start_date": "2011\/06\/27",
+            "office": "Argentina",
+            "extn": "5384"
+        },
+        {
+            "name": "Donna Snider",
+            "position": "Customer Support",
+            "salary": "112000",
+            "start_date": "2011\/01\/25",
+            "office": "New York",
+            "extn": "4226"
+        }
+    ]
+}

examples/ajax/data/objects_subarrays.txt

@@ -7,7 +7,7 @@
             ],
             "hr": [
                 "System Architect",
-                "$3,120",
+                "$320,800",
                 "2011\/04\/25"
             ],
             "office": "Edinburgh",
@@ -19,11 +19,11 @@
                 "Garrett"
             ],
             "hr": [
-                "Director",
-                "$5,300",
+                "Accountant",
+                "$170,750",
                 "2011\/07\/25"
             ],
-            "office": "Edinburgh",
+            "office": "Tokyo",
             "extn": "8422"
         },
         {
@@ -32,8 +32,8 @@
                 "Ashton"
             ],
             "hr": [
-                "Technical Author",
-                "$4,800",
+                "Junior Technical Author",
+                "$86,000",
                 "2009\/01\/12"
             ],
             "office": "San Francisco",
@@ -45,8 +45,8 @@
                 "Cedric"
             ],
             "hr": [
-                "Javascript Developer",
-                "$3,600",
+                "Senior Javascript Developer",
+                "$433,060",
                 "2012\/03\/29"
             ],
             "office": "Edinburgh",
@@ -54,15 +54,15 @@
         },
         {
             "name": [
-                "Elliott",
-                "Jenna"
+                "Satou",
+                "Airi"
             ],
             "hr": [
-                "Financial Controller",
-                "$5,300",
+                "Accountant",
+                "$162,700",
                 "2008\/11\/28"
             ],
-            "office": "Edinburgh",
+            "office": "Tokyo",
             "extn": "5407"
         },
         {
@@ -72,7 +72,7 @@
             ],
             "hr": [
                 "Integration Specialist",
-                "$4,525",
+                "$372,000",
                 "2012\/12\/02"
             ],
             "office": "New York",
@@ -85,7 +85,7 @@
             ],
             "hr": [
                 "Sales Assistant",
-                "$4,080",
+                "$137,500",
                 "2012\/08\/06"
             ],
             "office": "San Francisco",
@@ -98,10 +98,10 @@
             ],
             "hr": [
                 "Integration Specialist",
-                "$6,730",
+                "$327,900",
                 "2010\/10\/14"
             ],
-            "office": "Edinburgh",
+            "office": "Tokyo",
             "extn": "6200"
         },
         {
@@ -111,7 +111,7 @@
             ],
             "hr": [
                 "Javascript Developer",
-                "$5,000",
+                "$205,500",
                 "2009\/09\/15"
             ],
             "office": "San Francisco",
@@ -124,7 +124,7 @@
             ],
             "hr": [
                 "Software Engineer",
-                "$3,600",
+                "$103,600",
                 "2008\/12\/13"
             ],
             "office": "Edinburgh",
@@ -136,8 +136,8 @@
                 "Jena"
             ],
             "hr": [
-                "System Architect",
-                "$5,000",
+                "Office Manager",
+                "$90,560",
                 "2008\/12\/19"
             ],
             "office": "London",
@@ -149,8 +149,8 @@
                 "Quinn"
             ],
             "hr": [
-                "Financial Controller",
-                "$4,200",
+                "Support Lead",
+                "$342,000",
                 "2013\/03\/03"
             ],
             "office": "Edinburgh",
@@ -163,7 +163,7 @@
             ],
             "hr": [
                 "Regional Director",
-                "$5,300",
+                "$470,600",
                 "2008\/10\/16"
             ],
             "office": "San Francisco",
@@ -176,7 +176,7 @@
             ],
             "hr": [
                 "Senior Marketing Designer",
-                "$4,800",
+                "$313,500",
                 "2012\/12\/18"
             ],
             "office": "London",
@@ -189,7 +189,7 @@
             ],
             "hr": [
                 "Regional Director",
-                "$2,875",
+                "$385,750",
                 "2010\/03\/17"
             ],
             "office": "London",
@@ -201,8 +201,8 @@
                 "Michael"
             ],
             "hr": [
-                "Senior Marketing Designer",
-                "$3,750",
+                "Marketing Designer",
+                "$198,500",
                 "2012\/11\/27"
             ],
             "office": "London",
@@ -214,8 +214,8 @@
                 "Paul"
             ],
             "hr": [
-                "Javascript Developer",
-                "$5,000",
+                "Chief Financial Officer (CFO)",
+                "$725,000",
                 "2010\/06\/09"
             ],
             "office": "New York",
@@ -228,7 +228,7 @@
             ],
             "hr": [
                 "Systems Administrator",
-                "$3,120",
+                "$237,500",
                 "2009\/04\/10"
             ],
             "office": "New York",
@@ -241,7 +241,7 @@
             ],
             "hr": [
                 "Software Engineer",
-                "$3,120",
+                "$132,000",
                 "2012\/10\/13"
             ],
             "office": "London",
@@ -253,8 +253,8 @@
                 "Dai"
             ],
             "hr": [
-                "System Architect",
-                "$4,200",
+                "Personnel Lead",
+                "$217,500",
                 "2012\/09\/26"
             ],
             "office": "Edinburgh",
@@ -266,8 +266,8 @@
                 "Jenette"
             ],
             "hr": [
-                "Financial Controller",
-                "$4,965",
+                "Development Lead",
+                "$345,000",
                 "2011\/09\/03"
             ],
             "office": "New York",
@@ -279,8 +279,8 @@
                 "Yuri"
             ],
             "hr": [
-                "System Architect",
-                "$3,600",
+                "Chief Marketing Officer (CMO)",
+                "$675,000",
                 "2009\/06\/25"
             ],
             "office": "New York",
@@ -292,8 +292,8 @@
                 "Caesar"
             ],
             "hr": [
-                "Technical Author",
-                "$4,965",
+                "Pre-Sales Support",
+                "$106,450",
                 "2011\/12\/12"
             ],
             "office": "New York",
@@ -306,10 +306,10 @@
             ],
             "hr": [
                 "Sales Assistant",
-                "$4,965",
+                "$85,600",
                 "2010\/09\/20"
             ],
-            "office": "Edinburgh",
+            "office": "Sydney",
             "extn": "3023"
         },
         {
@@ -318,8 +318,8 @@
                 "Angelica"
             ],
             "hr": [
-                "System Architect",
-                "$2,875",
+                "Chief Executive Officer (CEO)",
+                "$1,200,000",
                 "2009\/10\/09"
             ],
             "office": "London",
@@ -332,7 +332,7 @@
             ],
             "hr": [
                 "Developer",
-                "$4,525",
+                "$92,575",
                 "2010\/12\/22"
             ],
             "office": "Edinburgh",
@@ -345,10 +345,10 @@
             ],
             "hr": [
                 "Regional Director",
-                "$4,080",
+                "$357,650",
                 "2010\/11\/14"
             ],
-            "office": "London",
+            "office": "Singapore",
             "extn": "9239"
         },
         {
@@ -358,7 +358,7 @@
             ],
             "hr": [
                 "Software Engineer",
-                "$3,750",
+                "$206,850",
                 "2011\/06\/07"
             ],
             "office": "San Francisco",
@@ -366,12 +366,12 @@
         },
         {
             "name": [
-                "Grimes",
-                "Ebony"
+                "Green",
+                "Fiona"
             ],
             "hr": [
-                "Software Engineer",
-                "$2,875",
+                "Chief Operating Officer (COO)",
+                "$850,000",
                 "2010\/03\/11"
             ],
             "office": "San Francisco",
@@ -379,15 +379,15 @@
         },
         {
             "name": [
-                "Chavez",
-                "Russell"
+                "Itou",
+                "Shou"
             ],
             "hr": [
-                "Director",
-                "$3,600",
+                "Regional Marketing",
+                "$163,000",
                 "2011\/08\/14"
             ],
-            "office": "Edinburgh",
+            "office": "Tokyo",
             "extn": "8899"
         },
         {
@@ -397,10 +397,10 @@
             ],
             "hr": [
                 "Integration Specialist",
-                "$3,750",
+                "$95,400",
                 "2011\/06\/02"
             ],
-            "office": "Edinburgh",
+            "office": "Sydney",
             "extn": "2769"
         },
         {
@@ -410,7 +410,7 @@
             ],
             "hr": [
                 "Developer",
-                "$2,875",
+                "$114,500",
                 "2009\/10\/22"
             ],
             "office": "London",
@@ -423,7 +423,7 @@
             ],
             "hr": [
                 "Technical Author",
-                "$6,730",
+                "$145,000",
                 "2011\/05\/07"
             ],
             "office": "London",
@@ -435,8 +435,8 @@
                 "Gavin"
             ],
             "hr": [
-                "Technical Author",
-                "$6,730",
+                "Team Leader",
+                "$235,500",
                 "2008\/10\/26"
             ],
             "office": "San Francisco",
@@ -448,8 +448,8 @@
                 "Martena"
             ],
             "hr": [
-                "Integration Specialist",
-                "$4,080",
+                "Post-Sales support",
+                "$324,050",
                 "2011\/03\/09"
             ],
             "office": "Edinburgh",
@@ -461,8 +461,8 @@
                 "Unity"
             ],
             "hr": [
-                "Senior Marketing Designer",
-                "$3,750",
+                "Marketing Designer",
+                "$85,675",
                 "2009\/12\/09"
             ],
             "office": "San Francisco",
@@ -474,8 +474,8 @@
                 "Howard"
             ],
             "hr": [
-                "Financial Controller",
-                "$4,080",
+                "Office Manager",
+                "$164,500",
                 "2008\/12\/16"
             ],
             "office": "San Francisco",
@@ -487,8 +487,8 @@
                 "Hope"
             ],
             "hr": [
-                "Financial Controller",
-                "$4,200",
+                "Secretary",
+                "$109,850",
                 "2010\/02\/12"
             ],
             "office": "San Francisco",
@@ -500,8 +500,8 @@
                 "Vivian"
             ],
             "hr": [
-                "System Architect",
-                "$4,965",
+                "Financial Controller",
+                "$452,500",
                 "2009\/02\/14"
             ],
             "office": "San Francisco",
@@ -513,8 +513,8 @@
                 "Timothy"
             ],
             "hr": [
-                "Financial Controller",
-                "$4,200",
+                "Office Manager",
+                "$136,200",
                 "2008\/12\/11"
             ],
             "office": "London",
@@ -527,7 +527,7 @@
             ],
             "hr": [
                 "Director",
-                "$5,000",
+                "$645,750",
                 "2008\/09\/26"
             ],
             "office": "New York",
@@ -535,15 +535,15 @@
         },
         {
             "name": [
-                "Weiss",
-                "Miriam"
+                "Liang",
+                "Olivia"
             ],
             "hr": [
                 "Support Engineer",
-                "$4,965",
+                "$234,500",
                 "2011\/02\/03"
             ],
-            "office": "Edinburgh",
+            "office": "Singapore",
             "extn": "2120"
         },
         {
@@ -553,7 +553,7 @@
             ],
             "hr": [
                 "Software Engineer",
-                "$4,200",
+                "$163,500",
                 "2011\/05\/03"
             ],
             "office": "London",
@@ -561,15 +561,15 @@
         },
         {
             "name": [
-                "Jackson",
-                "Odessa"
+                "Yamamoto",
+                "Sakura"
             ],
             "hr": [
                 "Support Engineer",
-                "$3,600",
+                "$139,575",
                 "2009\/08\/19"
             ],
-            "office": "Edinburgh",
+            "office": "Tokyo",
             "extn": "9383"
         },
         {
@@ -579,7 +579,7 @@
             ],
             "hr": [
                 "Developer",
-                "$3,600",
+                "$98,540",
                 "2013\/08\/11"
             ],
             "office": "New York",
@@ -592,7 +592,7 @@
             ],
             "hr": [
                 "Support Engineer",
-                "$4,800",
+                "$87,500",
                 "2009\/07\/07"
             ],
             "office": "San Francisco",
@@ -601,14 +601,14 @@
         {
             "name": [
                 "Baldwin",
-                "Elton"
+                "Serge"
             ],
             "hr": [
                 "Data Coordinator",
-                "$6,730",
+                "$138,575",
                 "2012\/04\/09"
             ],
-            "office": "Edinburgh",
+            "office": "Singapore",
             "extn": "8352"
         },
         {
@@ -618,7 +618,7 @@
             ],
             "hr": [
                 "Software Engineer",
-                "$4,800",
+                "$125,250",
                 "2010\/01\/04"
             ],
             "office": "New York",
@@ -631,7 +631,7 @@
             ],
             "hr": [
                 "Software Engineer",
-                "$5,300",
+                "$115,000",
                 "2012\/06\/01"
             ],
             "office": "San Francisco",
@@ -643,8 +643,8 @@
                 "Jennifer"
             ],
             "hr": [
-                "Javascript Developer",
-                "$2,875",
+                "Junior Javascript Developer",
+                "$75,650",
                 "2013\/02\/01"
             ],
             "office": "Edinburgh",
@@ -657,7 +657,7 @@
             ],
             "hr": [
                 "Sales Assistant",
-                "$4,800",
+                "$145,600",
                 "2011\/12\/06"
             ],
             "office": "New York",
@@ -669,8 +669,8 @@
                 "Hermione"
             ],
             "hr": [
-                "Director",
-                "$4,080",
+                "Regional Director",
+                "$356,250",
                 "2011\/03\/21"
             ],
             "office": "London",
@@ -683,7 +683,7 @@
             ],
             "hr": [
                 "Systems Administrator",
-                "$3,120",
+                "$103,500",
                 "2009\/02\/27"
             ],
             "office": "London",
@@ -696,7 +696,7 @@
             ],
             "hr": [
                 "Developer",
-                "$5,300",
+                "$86,500",
                 "2010\/07\/14"
             ],
             "office": "San Francisco",
@@ -709,7 +709,7 @@
             ],
             "hr": [
                 "Regional Director",
-                "$5,300",
+                "$183,000",
                 "2008\/11\/13"
             ],
             "office": "Edinburgh",
@@ -722,10 +722,10 @@
             ],
             "hr": [
                 "Javascript Developer",
-                "$4,080",
+                "$183,000",
                 "2011\/06\/27"
             ],
-            "office": "Edinburgh",
+            "office": "Singapore",
             "extn": "5384"
         },
         {
@@ -734,8 +734,8 @@
                 "Donna"
             ],
             "hr": [
-                "System Architect",
-                "$3,120",
+                "Customer Support",
+                "$112,000",
                 "2011\/01\/25"
             ],
             "office": "New York",

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": "Sydney",
+            "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": "Sydney",
+            "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

@@ -3,22 +3,22 @@
 <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="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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( {
+	$('#example').DataTable( {
 		"processing": true,
 		"ajax": "data/objects_deep.txt",
 		"columns": [
@@ -34,30 +34,21 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Nested object data (objects)</span></h1>
-
+			<h1>DataTables example <span>Nested object data (objects)</span></h1>
 			<div class="info">
-				<p>DataTables has the ability to use data from almost data JSON data source through the use of the
-				<a href="//datatables.net/init/columns.data"><code class="option" title=
-				"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/init/columns.data"><code class="option" title=
-				"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">{
+				<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",
@@ -69,11 +60,10 @@ $(document).ready(function() {
 		"5421"
 	]
 }
-</code>
-</pre>
+</code></pre>
 			</div>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -84,7 +74,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -96,20 +85,17 @@ $(document).ready(function() {
 					</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>
-					<pre class="brush: js;">
-$(document).ready(function() {
-	$('#example').dataTable( {
+					<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;: [
@@ -121,207 +107,366 @@ $(document).ready(function() {
 			{ &quot;data&quot;: &quot;hr.salary&quot; }
 		]
 	} );
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-
-</pre>
+						<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>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
 						<ul class="toc">
-							<li><a href="../data_sources/dom.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>
+							<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="./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>
+							<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>
+						<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>
+							<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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/defer_render.html

@@ -3,22 +3,22 @@
 <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="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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( {
+	$('#example').DataTable( {
 		"ajax": "data/arrays.txt",
 		"deferRender": true
 	} );
@@ -26,31 +26,23 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Deferred rendering for speed</span></h1>
-
+			<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/init/deferRender"><code class="option" title=
-				"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>
+				<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>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -61,7 +53,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -73,224 +64,380 @@ $(document).ready(function() {
 					</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>
-					<pre class="brush: js;">
-$(document).ready(function() {
-	$('#example').dataTable( {
+					<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
 	} );
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-
-</pre>
+						<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>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
 						<ul class="toc">
-							<li><a href="../data_sources/dom.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>
+							<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="./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>
+							<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>
+						<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>
+							<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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/index.html

@@ -3,61 +3,69 @@
 <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.5.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>
-
+			<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/init/ajax"><code class="option" title="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>
+				<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="./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>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/null_data_source.html

@@ -3,20 +3,20 @@
 <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="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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",
@@ -35,40 +35,33 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Generated content for a column</span></h1>
-
+			<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>
-					<li><a href="//datatables.net/init/columns.render"><code class="option" title=
-					"Initialisation option">columns.render</code></a> for content that is dynamic (i.e. based upon the
-					row's data)</li>
-					<li><a href="//datatables.net/init/columns.defaultContent"><code class="option" title=
-					"Initialisation option">columns.defaultContent</code></a> for static content (i.e. simple
-					strings)</li>
+				<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="//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>
 				</ul>
-
-				<p>This examples shows the use of <a href="//datatables.net/init/columns.defaultContent"><code class=
-				"option" title="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/api/row%28%29.data%28%29"><code class="api" title=
-				"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/init/columns.data"><code class="option" title=
-				"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 that should be obtained data source object.</p>
+				<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>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -79,7 +72,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -91,19 +83,16 @@ $(document).ready(function() {
 					</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>
-					<pre class="brush: js;">
-$(document).ready(function() {
+					<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;: [ {
@@ -117,208 +106,366 @@ $(document).ready(function() {
 		var data = table.row( $(this).parents('tr') ).data();
 		alert( data[0] +&quot;'s salary is: &quot;+ data[ 5 ] );
 	} );
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-
-</pre>
+						<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>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
 						<ul class="toc">
-							<li><a href="../data_sources/dom.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>
+							<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="./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>
+							<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>
+						<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>
+							<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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/objects.html

@@ -3,22 +3,22 @@
 <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="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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( {
+	$('#example').DataTable( {
 		"ajax": "data/objects.txt",
 		"columns": [
 			{ "data": "name" },
@@ -33,27 +33,20 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Ajax data source (objects)</span></h1>
-
+			<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/init/columns.data"><code class=
-				"option" title="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">{
+				<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",
@@ -61,11 +54,11 @@ $(document).ready(function() {
 	"office":	 "Edinburgh",
 	"extn":	   "5421"
 }
-</code>
-</pre>
+</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>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -76,7 +69,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -88,20 +80,17 @@ $(document).ready(function() {
 					</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>
-					<pre class="brush: js;">
-$(document).ready(function() {
-	$('#example').dataTable( {
+					<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; },
@@ -112,207 +101,366 @@ $(document).ready(function() {
 			{ &quot;data&quot;: &quot;salary&quot; }
 		]
 	} );
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-
-</pre>
+						<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>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
 						<ul class="toc">
-							<li><a href="../data_sources/dom.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>
+							<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="./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>
+							<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>
+						<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>
+							<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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/objects_subarrays.html

@@ -3,22 +3,22 @@
 <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="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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( {
+	$('#example').DataTable( {
 		"ajax": "data/objects_subarrays.txt",
 		"columns": [
 			{ "data": "name[, ]" },
@@ -33,43 +33,30 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Nested object data (arrays)</span></h1>
-
+			<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/init/columns.data"><code class="option" title=
-				"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/init/columns.data"><code class="option" title=
-				"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/init/columns.data"><code class=
-				"option" title="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/init/columns.data"><code class="option" title=
-				"Initialisation option">columns.data</code></a> as a function).</p>
-
-				<p>This example shows two different aspects of using <a href=
-				"//datatables.net/init/columns.data"><code class="option" title=
-				"Initialisation option">columns.data</code></a> to read arrays:</p>
-
-				<ul>
-					<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>
+				<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">{
+				<pre><code class="multiline">{
 	"name": [
 		"Nixon",
 		"Tiger"
@@ -82,11 +69,10 @@ $(document).ready(function() {
 	"office": "Edinburgh",
 	"extn": "5421"
 }
-</code>
-</pre>
+</code></pre>
 			</div>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -97,7 +83,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -109,20 +94,17 @@ $(document).ready(function() {
 					</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>
-					<pre class="brush: js;">
-$(document).ready(function() {
-	$('#example').dataTable( {
+					<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; },
@@ -133,207 +115,366 @@ $(document).ready(function() {
 			{ &quot;data&quot;: &quot;hr.1&quot; }
 		]
 	} );
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-
-</pre>
+						<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>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
 						<ul class="toc">
-							<li><a href="../data_sources/dom.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>
+							<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="./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>
+							<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>
+						<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>
+							<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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/orthogonal-data.html

@@ -0,0 +1,478 @@
+<!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.5.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.5.1.js">https://code.jquery.com/jquery-3.5.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/data_rendering.html">Data rendering</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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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-2020<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

@@ -3,56 +3,45 @@
 <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="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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( {
+	$('#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>
-
+			<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a> option
-				to the address of the JSON data source.</p>
-
-				<p>The <a href="//datatables.net/init/ajax"><code class="option" title=
-				"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/init/ajax"><code class=
-				"option" title="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 used may using the <a href=
-				"//datatables.net/init/column.data"><code class="option" title=
-				"Initialisation option">column.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">[
+				<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",
@@ -60,11 +49,11 @@ $(document).ready(function() {
 	"2011/04/25",
 	"$3,120"
 ]
-</code>
-</pre>
+</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>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -75,7 +64,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -87,223 +75,379 @@ $(document).ready(function() {
 					</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>
-					<pre class="brush: js;">
-$(document).ready(function() {
-	$('#example').dataTable( {
+					<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;
 	} );
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-
-</pre>
+						<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>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
 						<ul class="toc">
-							<li><a href="../data_sources/dom.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>
+							<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="./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>
+							<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>
+						<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>
+							<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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/add_row.html

@@ -3,20 +3,20 @@
 <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="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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();
@@ -29,7 +29,7 @@ $(document).ready(function() {
 			counter +'.3',
 			counter +'.4',
 			counter +'.5'
-		] ).draw();
+		] ).draw( false );
 
 		counter++;
 	} );
@@ -41,28 +41,27 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Add rows</span></h1>
-
+			<h1>DataTables example <span>Add rows</span></h1>
 			<div class="info">
-				<p>New rows can be added to a DataTable very easily using the <a href=
-				"//datatables.net/api/row.add%28%29"><code class="api" title="API method">row.add()</code></a> API
-				method. Simply call the API function with the data that is to be used for the new row (be it an array
-				or object). Multiple rows can be added using the <a href=
-				"//datatables.net/api/rows.add%28%29"><code class="api" title="API method">rows.add()</code></a> method
-				(note the plural).</p>
-
-				<p>Note that in order to see the new row in the table you must call the <a href=
-				"//datatables.net/api/draw%28%29"><code class="api" title="API method">draw()</code></a> method, which
-				is easily done through the chaining that the DataTables API makes use of.</p>
-
+				<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>
-			</div><button id="addRow">Add new row</button>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+				<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-html">
+				<button id="addRow">Add new row</button>
+			</div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Column 1</th>
@@ -72,7 +71,6 @@ $(document).ready(function() {
 						<th>Column 5</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Column 1</th>
@@ -83,19 +81,16 @@ $(document).ready(function() {
 					</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>
-					<pre class="brush: js;">
-$(document).ready(function() {
+					<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;
 
@@ -106,212 +101,373 @@ $(document).ready(function() {
 			counter +'.3',
 			counter +'.4',
 			counter +'.5'
-		] ).draw();
+		] ).draw( false );
 
 		counter++;
 	} );
 
 	// Automatically add a first row of data
 	$('#addRow').click();
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-
-</pre>
+						<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>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
 						<ul class="toc">
-							<li><a href="../data_sources/dom.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>
+							<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/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>
+							<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>
+						<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>
+							<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="./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 filtering (text inputs)</a></li>
-							<li><a href="./multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="./regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/index.html

@@ -3,63 +3,79 @@
 <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.5.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>
-
+			<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>
+				<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>
+						<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 filtering (text inputs)</a></li>
-							<li><a href="./multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="./regex.html">Filtering API (regular expressions)</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/row_details.html

@@ -3,28 +3,28 @@
 <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 - Child rows (show extra / detailed information)</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">
-
+	
 td.details-control {
 	background: url('../resources/details_open.png') no-repeat center center;
 	cursor: pointer;
 }
-tr.details td.details-control {
+tr.shown td.details-control {
 	background: url('../resources/details_close.png') no-repeat center center;
 }
 
 	</style>
-	<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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">
-
+	
 
 /* Formatting function for row details - modify as you need */
 function format ( d ) {
@@ -50,7 +50,7 @@ $(document).ready(function() {
 		"ajax": "../ajax/data/objects.txt",
 		"columns": [
 			{
-				"class":          'details-control',
+				"className":      'details-control',
 				"orderable":      false,
 				"data":           null,
 				"defaultContent": ''
@@ -65,7 +65,7 @@ $(document).ready(function() {
 	
 	// Add event listener for opening and closing details
 	$('#example tbody').on('click', 'td.details-control', function () {
-		var tr = $(this).parents('tr');
+		var tr = $(this).closest('tr');
 		var row = table.row( tr );
 
 		if ( row.child.isShown() ) {
@@ -84,29 +84,22 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Child rows (show extra / detailed information)</span></h1>
-
+			<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
 			<div class="info">
-				<p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em>
-				row in the DataTable. This can be used to show additional information about a row, useful for cases
-				where you wish to convey more information about a row than there is space for in the host table.</p>
-
-				<p>The example below makes use of the <a href="//datatables.net/api/row%28%29.child"><code class="api"
-				title="API method">row().child</code></a> methods to firstly check if a row is already displayed, and
-				if so hide it (<a href="//datatables.net/api/row%28%29.child.hide%28%29"><code class="api" title=
-				"API method">row().child.hide()</code></a>), otherwise show it (<a href=
-				"//datatables.net/api/row%28%29.child.show%28%29"><code class="api" title=
-				"API method">row().child.show()</code></a>). The content of the child row is, in this example, defined
-				by the <code>formatDetails()</code> function, but you would replace that with whatever you wanted to
-				show the content required, possibly including, for example, an Ajax call to the server to obtain the
-				extra information to show.</p>
+				<p>The DataTables API has a number of methods for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional information
+				about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
+				<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a>
+				methods to first check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
+				"DataTables API method">row().child.hide()</code></a>), otherwise show it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title=
+				"DataTables API method">row().child.show()</code></a>). The content of the child row in this example is defined by the <code>format()</code> function, but you
+				would replace that with whatever content you wanted to show, possibly including, for example, <a href="https://www.datatables.net/blog/2017-03-31">an Ajax call to
+				the server</a> to obtain any extra information.</p>
 			</div>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th></th>
@@ -116,7 +109,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th></th>
@@ -127,19 +119,16 @@ $(document).ready(function() {
 					</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>
-					<pre class="brush: js;">
-/* Formatting function for row details - modify as you need */
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">/* Formatting function for row details - modify as you need */
 function format ( d ) {
 	// `d` is the original data object for the row
 	return '&lt;table cellpadding=&quot;5&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; style=&quot;padding-left:50px;&quot;&gt;'+
@@ -163,7 +152,7 @@ $(document).ready(function() {
 		&quot;ajax&quot;: &quot;../ajax/data/objects.txt&quot;,
 		&quot;columns&quot;: [
 			{
-				&quot;class&quot;:          'details-control',
+				&quot;className&quot;:      'details-control',
 				&quot;orderable&quot;:      false,
 				&quot;data&quot;:           null,
 				&quot;defaultContent&quot;: ''
@@ -178,7 +167,7 @@ $(document).ready(function() {
 	
 	// Add event listener for opening and closing details
 	$('#example tbody').on('click', 'td.details-control', function () {
-		var tr = $(this).parents('tr');
+		var tr = $(this).closest('tr');
 		var row = table.row( tr );
 
 		if ( row.child.isShown() ) {
@@ -192,212 +181,372 @@ $(document).ready(function() {
 			tr.addClass('shown');
 		}
 	} );
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-td.details-control {
+						<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">td.details-control {
 	background: url('../resources/details_open.png') no-repeat center center;
 	cursor: pointer;
 }
-tr.details td.details-control {
+tr.shown td.details-control {
 	background: url('../resources/details_close.png') no-repeat center center;
-}
-</pre>
+}</code>
 					</div>
-
-					<p>The following CSS library files are loaded for use in this example to provide the styling of the
-					table:</p>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
 						<ul class="toc">
-							<li><a href="../data_sources/dom.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>
+							<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 class="active">
+								<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/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>
+							<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>
+						<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>
+							<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="./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 filtering (text inputs)</a></li>
-							<li><a href="./multi_filter_select.html">Individual column filtering (select
-							inputs)</a></li>
-							<li><a href="./highlight.html">Highlighting rows and columns</a></li>
-							<li class="active"><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 jQuery UI tabs</a></li>
-							<li><a href="./regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/comma-decimal.html

@@ -0,0 +1,912 @@
+<!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.5.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>Sydney</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>Sydney</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.5.1.js">https://code.jquery.com/jquery-3.5.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="./data_rendering.html">Data rendering</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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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-2020<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/data_rendering.html

@@ -0,0 +1,582 @@
+<!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 - Data rendering</title>
+	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
+	<link rel="stylesheet" type="text/css" href="https://github.com/downloads/lafeber/world-flags-sprite/flags32.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">
+	
+	.f32 .flag {
+		vertical-align: middle;
+		margin: -8px 0;
+	}
+
+	progress {
+		width: 100%;
+	}
+
+	</style>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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: '../ajax/data/objects_salary.txt',
+		columns: [
+			{
+				data: 'name'
+			},
+			{
+				data: 'position'
+			},
+			{
+				className: 'f32', // used by world-flags-sprite library
+				data: 'office',
+				render: function(data, type) {
+					if (type === 'display') {
+						var country = '';
+
+						switch (data) {
+							case 'Argentina':
+								country = 'ar';
+								break;
+							case 'Edinburgh':
+								country = '_Scotland';
+								break;
+							case 'London':
+								country = '_England';
+								break;
+							case 'New York':
+							case 'San Francisco':
+								country = 'us';
+								break;
+							case 'Sydney':
+								country = 'au';
+								break;
+							case 'Tokyo':
+								country = 'jp';
+								break;
+						}
+
+						return '<span class="flag ' + country + '"></span> ' + data;
+					}
+
+					return data;
+				}
+			},
+			{
+				data: 'extn',
+				render: function(data, type, row, meta) {
+					return type === 'display' ?
+						'<progress value="' + data + '" max="9999"></progress>' :
+						data;
+				}
+			},
+			{
+				data: "start_date"
+			},
+			{
+				data: "salary",
+				render: $.fn.dataTable.render.number( ',', '.', 2, '$' )
+			}
+		]
+	});
+});
+
+	</script>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Data rendering</span></h1>
+			<div class="info">
+				<p>Data within DataTables can be easily rendered to add graphics or colour to your tables, as demonstrated in the example on this page. These examples make use of
+				<a href="//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> to customise the
+				cells in three ways:</p>
+				<ul class="markdown">
+					<li>A flag is added to the <em>Office</em> column</li>
+					<li>a HTML5 progress bar is added to the <em>Progress</em> column</li>
+					<li>and the built-in number renderer is used for format the <em>Salary</em>.</li>
+				</ul>
+				<p>See the <a href="https://datatables.net/manual/data/renderers">data rendering manual page</a> for more details on how to use data renderers. Also, this example
+				uses <a href="https://datatables.net/manual/ajax">Ajax to load the data</a>. More <a href="../ajax">Ajax examples are available</a>.</p>
+			</div>
+			<div class="demo-html"></div>
+			<table id="example" class="display nowrap" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Progress</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Progress</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: '../ajax/data/objects_salary.txt',
+		columns: [
+			{
+				data: 'name'
+			},
+			{
+				data: 'position'
+			},
+			{
+				className: 'f32', // used by world-flags-sprite library
+				data: 'office',
+				render: function(data, type) {
+					if (type === 'display') {
+						var country = '';
+
+						switch (data) {
+							case 'Argentina':
+								country = 'ar';
+								break;
+							case 'Edinburgh':
+								country = '_Scotland';
+								break;
+							case 'London':
+								country = '_England';
+								break;
+							case 'New York':
+							case 'San Francisco':
+								country = 'us';
+								break;
+							case 'Sydney':
+								country = 'au';
+								break;
+							case 'Tokyo':
+								country = 'jp';
+								break;
+						}
+
+						return '&lt;span class=&quot;flag ' + country + '&quot;&gt;&lt;/span&gt; ' + data;
+					}
+
+					return data;
+				}
+			},
+			{
+				data: 'extn',
+				render: function(data, type, row, meta) {
+					return type === 'display' ?
+						'&lt;progress value=&quot;' + data + '&quot; max=&quot;9999&quot;&gt;&lt;/progress&gt;' :
+						data;
+				}
+			},
+			{
+				data: &quot;start_date&quot;
+			},
+			{
+				data: &quot;salary&quot;,
+				render: $.fn.dataTable.render.number( ',', '.', 2, '$' )
+			}
+		]
+	});
+});</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.5.1.js">https://code.jquery.com/jquery-3.5.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">.f32 .flag {
+		vertical-align: middle;
+		margin: -8px 0;
+	}
+
+	progress {
+		width: 100%;
+	}</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>
+						<li>
+							<a href="https://github.com/downloads/lafeber/world-flags-sprite/flags32.css">https://github.com/downloads/lafeber/world-flags-sprite/flags32.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 class="active">
+								<a href="./data_rendering.html">Data rendering</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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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-2020<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

@@ -3,65 +3,94 @@
 <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.5.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 - Simple usage</title>
+	<title>DataTables examples - Basic initialisation</title>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Simple usage</span></h1>
-
+			<h1>DataTables example <span>Basic initialisation</span></h1>
 			<div class="info">
-				<p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The
-				examples in this section demonstrate basic initialisation of DataTables and how it can be easily
-				customised by passing an object with the options you want.</p>
+				<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 Init</a></h3>
+						<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_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<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="./data_rendering.html">Data rendering</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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/multiple_tables.html

@@ -3,52 +3,45 @@
 <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 - Multiple tables</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">
-
+	
 	div.dataTables_wrapper {
 		margin-bottom: 3em;
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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() {
-	$('table.display').dataTable();
+	$('table.display').DataTable();
 } );
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Multiple tables</span></h1>
-
+			<h1>DataTables example <span>Multiple tables</span></h1>
 			<div class="info">
-				<p>Often you might wish to initialise multiple tables with a single statement. This is trivially done
-				by using a jQuery selector which will pick up multiple tables.</p>
-
-				<p>The tables are independent for user control (i.e. user controlled paging on one table does not
-				effect the others), but they do share the initialisation parameters given (for example if you specific
-				the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to
-				manipulate both together, or independently.</p>
-
-				<p>The example below shows two tables initialised with a single line of code, through the use of the
-				<code>table.display</code> selector (i.e. select all elements which have the class of
-				<code>table.display</code> (which is suitable in this example, you might wish to use a different
-				selector).</p>
+				<p>Often you might wish to initialise multiple tables with a single statement. This is trivially done by using a jQuery selector which will pick up multiple
+				tables.</p>
+				<p>The tables are independent for user control (i.e. user controlled paging on one table does not effect the others), but they do share the initialisation
+				parameters given (for example if you specific the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to manipulate both
+				together, or independently.</p>
+				<p>The example below shows two tables initialised with a single line of code, through the use of the <code>table.display</code> selector (i.e. select all elements
+				which have the class of <code>table.display</code> (which is suitable in this example, you might wish to use a different selector).</p>
 			</div>
-
-			<table id="" class="display" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -58,165 +51,71 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
-
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
 						<td>System Architect</td>
 						<td>Edinburgh</td>
 						<td>61</td>
-						<td>$3,120</td>
-					</tr>
-					<tr>
-						<td>Garrett Winters</td>
-						<td>Director</td>
-						<td>Edinburgh</td>
-						<td>63</td>
-						<td>$5,300</td>
+						<td>$320,800</td>
 					</tr>
 					<tr>
 						<td>Cedric Kelly</td>
-						<td>Javascript Developer</td>
+						<td>Senior Javascript Developer</td>
 						<td>Edinburgh</td>
 						<td>22</td>
-						<td>$3,600</td>
-					</tr>
-					<tr>
-						<td>Jenna Elliott</td>
-						<td>Financial Controller</td>
-						<td>Edinburgh</td>
-						<td>33</td>
-						<td>$5,300</td>
-					</tr>
-					<tr>
-						<td>Rhona Davidson</td>
-						<td>Integration Specialist</td>
-						<td>Edinburgh</td>
-						<td>55</td>
-						<td>$6,730</td>
+						<td>$433,060</td>
 					</tr>
 					<tr>
 						<td>Sonya Frost</td>
 						<td>Software Engineer</td>
 						<td>Edinburgh</td>
 						<td>23</td>
-						<td>$3,600</td>
+						<td>$103,600</td>
 					</tr>
 					<tr>
 						<td>Quinn Flynn</td>
-						<td>Financial Controller</td>
+						<td>Support Lead</td>
 						<td>Edinburgh</td>
 						<td>22</td>
-						<td>$4,200</td>
+						<td>$342,000</td>
 					</tr>
 					<tr>
 						<td>Dai Rios</td>
-						<td>System Architect</td>
+						<td>Personnel Lead</td>
 						<td>Edinburgh</td>
 						<td>35</td>
-						<td>$4,200</td>
-					</tr>
-					<tr>
-						<td>Doris Wilder</td>
-						<td>Sales Assistant</td>
-						<td>Edinburgh</td>
-						<td>23</td>
-						<td>$4,965</td>
+						<td>$217,500</td>
 					</tr>
 					<tr>
 						<td>Gavin Joyce</td>
 						<td>Developer</td>
 						<td>Edinburgh</td>
 						<td>42</td>
-						<td>$4,525</td>
-					</tr>
-					<tr>
-						<td>Russell Chavez</td>
-						<td>Director</td>
-						<td>Edinburgh</td>
-						<td>20</td>
-						<td>$3,600</td>
-					</tr>
-					<tr>
-						<td>Michelle House</td>
-						<td>Integration Specialist</td>
-						<td>Edinburgh</td>
-						<td>37</td>
-						<td>$3,750</td>
+						<td>$92,575</td>
 					</tr>
 					<tr>
 						<td>Martena Mccray</td>
-						<td>Integration Specialist</td>
+						<td>Post-Sales support</td>
 						<td>Edinburgh</td>
 						<td>46</td>
-						<td>$4,080</td>
-					</tr>
-					<tr>
-						<td>Miriam Weiss</td>
-						<td>Support Engineer</td>
-						<td>Edinburgh</td>
-						<td>64</td>
-						<td>$4,965</td>
-					</tr>
-					<tr>
-						<td>Odessa Jackson</td>
-						<td>Support Engineer</td>
-						<td>Edinburgh</td>
-						<td>37</td>
-						<td>$3,600</td>
-					</tr>
-					<tr>
-						<td>Elton Baldwin</td>
-						<td>Data Coordinator</td>
-						<td>Edinburgh</td>
-						<td>64</td>
-						<td>$6,730</td>
+						<td>$324,050</td>
 					</tr>
 					<tr>
 						<td>Jennifer Acosta</td>
-						<td>Javascript Developer</td>
+						<td>Junior Javascript Developer</td>
 						<td>Edinburgh</td>
 						<td>43</td>
-						<td>$2,875</td>
+						<td>$75,650</td>
 					</tr>
 					<tr>
 						<td>Shad Decker</td>
 						<td>Regional Director</td>
 						<td>Edinburgh</td>
 						<td>51</td>
-						<td>$5,300</td>
-					</tr>
-					<tr>
-						<td>Michael Bruce</td>
-						<td>Javascript Developer</td>
-						<td>Edinburgh</td>
-						<td>29</td>
-						<td>$4,080</td>
+						<td>$183,000</td>
 					</tr>
 				</tbody>
-			</table>
-
-			<table id="" class="display" cellspacing="0" width="100%">
-				<thead>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Salary</th>
-					</tr>
-				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -226,316 +125,486 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</tfoot>
-
+			</table>
+			<table id="" class="display" style="width:100%">
+				<thead>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Salary</th>
+					</tr>
+				</thead>
 				<tbody>
 					<tr>
 						<td>Jena Gaines</td>
-						<td>System Architect</td>
+						<td>Office Manager</td>
 						<td>London</td>
 						<td>30</td>
-						<td>$5,000</td>
+						<td>$90,560</td>
 					</tr>
 					<tr>
 						<td>Haley Kennedy</td>
 						<td>Senior Marketing Designer</td>
 						<td>London</td>
 						<td>43</td>
-						<td>$4,800</td>
+						<td>$313,500</td>
 					</tr>
 					<tr>
 						<td>Tatyana Fitzpatrick</td>
 						<td>Regional Director</td>
 						<td>London</td>
 						<td>19</td>
-						<td>$2,875</td>
+						<td>$385,750</td>
 					</tr>
 					<tr>
 						<td>Michael Silva</td>
-						<td>Senior Marketing Designer</td>
+						<td>Marketing Designer</td>
 						<td>London</td>
 						<td>66</td>
-						<td>$3,750</td>
+						<td>$198,500</td>
 					</tr>
 					<tr>
 						<td>Bradley Greer</td>
 						<td>Software Engineer</td>
 						<td>London</td>
 						<td>41</td>
-						<td>$3,120</td>
+						<td>$132,000</td>
 					</tr>
 					<tr>
 						<td>Angelica Ramos</td>
-						<td>System Architect</td>
+						<td>Chief Executive Officer (CEO)</td>
 						<td>London</td>
-						<td>36</td>
-						<td>$2,875</td>
-					</tr>
-					<tr>
-						<td>Jennifer Chang</td>
-						<td>Regional Director</td>
-						<td>London</td>
-						<td>28</td>
-						<td>$4,080</td>
+						<td>47</td>
+						<td>$1,200,000</td>
 					</tr>
 					<tr>
 						<td>Suki Burks</td>
 						<td>Developer</td>
 						<td>London</td>
 						<td>53</td>
-						<td>$2,875</td>
+						<td>$114,500</td>
 					</tr>
 					<tr>
 						<td>Prescott Bartlett</td>
 						<td>Technical Author</td>
 						<td>London</td>
 						<td>27</td>
-						<td>$6,730</td>
+						<td>$145,000</td>
 					</tr>
 					<tr>
 						<td>Timothy Mooney</td>
-						<td>Financial Controller</td>
+						<td>Office Manager</td>
 						<td>London</td>
 						<td>37</td>
-						<td>$4,200</td>
+						<td>$136,200</td>
 					</tr>
 					<tr>
 						<td>Bruno Nash</td>
 						<td>Software Engineer</td>
 						<td>London</td>
 						<td>38</td>
-						<td>$4,200</td>
+						<td>$163,500</td>
 					</tr>
 					<tr>
 						<td>Hermione Butler</td>
-						<td>Director</td>
+						<td>Regional Director</td>
 						<td>London</td>
 						<td>47</td>
-						<td>$4,080</td>
+						<td>$356,250</td>
 					</tr>
 					<tr>
 						<td>Lael Greer</td>
 						<td>Systems Administrator</td>
 						<td>London</td>
 						<td>21</td>
-						<td>$3,120</td>
+						<td>$103,500</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<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>
-					<pre class="brush: js;">
-$(document).ready(function() {
-	$('table.display').dataTable();
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	$('table.display').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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-div.dataTables_wrapper {
+						<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">div.dataTables_wrapper {
 		margin-bottom: 3em;
-	}
-</pre>
+	}</code>
 					</div>
-
-					<p>The following CSS library files are loaded for use in this example to provide the styling of the
-					table:</p>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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 class="active"><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_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<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 class="active">
+								<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="./data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="../data_sources/index.html">Data sources</a></h3>
 						<ul class="toc">
-							<li><a href="../data_sources/dom.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>
+							<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/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>
+							<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>
+						<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>
+							<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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/scroll_y_dynamic.html

@@ -0,0 +1,904 @@
+<!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.5.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>Sydney</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>Sydney</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.5.1.js">https://code.jquery.com/jquery-3.5.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="./data_rendering.html">Data rendering</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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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-2020<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_theme.html

@@ -1,750 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-	<meta charset="utf-8">
-	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-
-	<title>DataTables example - Scroll - vertical with jQuery UI ThemeRoller</title>
-	<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
-	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables_themeroller.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="../../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="../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":        200,
-		"scrollCollapse": true,
-		"jQueryUI":       true
-	} );
-} );
-
-	</script>
-</head>
-
-<body class="dt-example">
-	<div class="container">
-		<section>
-			<h1>DataTables example <span>- Scroll - vertical with jQuery UI ThemeRoller</span></h1>
-
-			<div class="info">
-				<p>This example is an extension of the vertical scrolling example, showing DataTables ability to be
-				themed by jQuery UI's ThemeRoller.</p>
-			</div>
-
-			<table id="example" class="display" cellspacing="0" 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>
-
-				<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>$3,120</td>
-					</tr>
-					<tr>
-						<td>Garrett Winters</td>
-						<td>Director</td>
-						<td>Edinburgh</td>
-						<td>63</td>
-						<td>2011/07/25</td>
-						<td>$5,300</td>
-					</tr>
-					<tr>
-						<td>Ashton Cox</td>
-						<td>Technical Author</td>
-						<td>San Francisco</td>
-						<td>66</td>
-						<td>2009/01/12</td>
-						<td>$4,800</td>
-					</tr>
-					<tr>
-						<td>Cedric Kelly</td>
-						<td>Javascript Developer</td>
-						<td>Edinburgh</td>
-						<td>22</td>
-						<td>2012/03/29</td>
-						<td>$3,600</td>
-					</tr>
-					<tr>
-						<td>Jenna Elliott</td>
-						<td>Financial Controller</td>
-						<td>Edinburgh</td>
-						<td>33</td>
-						<td>2008/11/28</td>
-						<td>$5,300</td>
-					</tr>
-					<tr>
-						<td>Brielle Williamson</td>
-						<td>Integration Specialist</td>
-						<td>New York</td>
-						<td>61</td>
-						<td>2012/12/02</td>
-						<td>$4,525</td>
-					</tr>
-					<tr>
-						<td>Herrod Chandler</td>
-						<td>Sales Assistant</td>
-						<td>San Francisco</td>
-						<td>59</td>
-						<td>2012/08/06</td>
-						<td>$4,080</td>
-					</tr>
-					<tr>
-						<td>Rhona Davidson</td>
-						<td>Integration Specialist</td>
-						<td>Edinburgh</td>
-						<td>55</td>
-						<td>2010/10/14</td>
-						<td>$6,730</td>
-					</tr>
-					<tr>
-						<td>Colleen Hurst</td>
-						<td>Javascript Developer</td>
-						<td>San Francisco</td>
-						<td>39</td>
-						<td>2009/09/15</td>
-						<td>$5,000</td>
-					</tr>
-					<tr>
-						<td>Sonya Frost</td>
-						<td>Software Engineer</td>
-						<td>Edinburgh</td>
-						<td>23</td>
-						<td>2008/12/13</td>
-						<td>$3,600</td>
-					</tr>
-					<tr>
-						<td>Jena Gaines</td>
-						<td>System Architect</td>
-						<td>London</td>
-						<td>30</td>
-						<td>2008/12/19</td>
-						<td>$5,000</td>
-					</tr>
-					<tr>
-						<td>Quinn Flynn</td>
-						<td>Financial Controller</td>
-						<td>Edinburgh</td>
-						<td>22</td>
-						<td>2013/03/03</td>
-						<td>$4,200</td>
-					</tr>
-					<tr>
-						<td>Charde Marshall</td>
-						<td>Regional Director</td>
-						<td>San Francisco</td>
-						<td>36</td>
-						<td>2008/10/16</td>
-						<td>$5,300</td>
-					</tr>
-					<tr>
-						<td>Haley Kennedy</td>
-						<td>Senior Marketing Designer</td>
-						<td>London</td>
-						<td>43</td>
-						<td>2012/12/18</td>
-						<td>$4,800</td>
-					</tr>
-					<tr>
-						<td>Tatyana Fitzpatrick</td>
-						<td>Regional Director</td>
-						<td>London</td>
-						<td>19</td>
-						<td>2010/03/17</td>
-						<td>$2,875</td>
-					</tr>
-					<tr>
-						<td>Michael Silva</td>
-						<td>Senior Marketing Designer</td>
-						<td>London</td>
-						<td>66</td>
-						<td>2012/11/27</td>
-						<td>$3,750</td>
-					</tr>
-					<tr>
-						<td>Paul Byrd</td>
-						<td>Javascript Developer</td>
-						<td>New York</td>
-						<td>64</td>
-						<td>2010/06/09</td>
-						<td>$5,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>$3,120</td>
-					</tr>
-					<tr>
-						<td>Bradley Greer</td>
-						<td>Software Engineer</td>
-						<td>London</td>
-						<td>41</td>
-						<td>2012/10/13</td>
-						<td>$3,120</td>
-					</tr>
-					<tr>
-						<td>Dai Rios</td>
-						<td>System Architect</td>
-						<td>Edinburgh</td>
-						<td>35</td>
-						<td>2012/09/26</td>
-						<td>$4,200</td>
-					</tr>
-					<tr>
-						<td>Jenette Caldwell</td>
-						<td>Financial Controller</td>
-						<td>New York</td>
-						<td>30</td>
-						<td>2011/09/03</td>
-						<td>$4,965</td>
-					</tr>
-					<tr>
-						<td>Yuri Berry</td>
-						<td>System Architect</td>
-						<td>New York</td>
-						<td>40</td>
-						<td>2009/06/25</td>
-						<td>$3,600</td>
-					</tr>
-					<tr>
-						<td>Caesar Vance</td>
-						<td>Technical Author</td>
-						<td>New York</td>
-						<td>21</td>
-						<td>2011/12/12</td>
-						<td>$4,965</td>
-					</tr>
-					<tr>
-						<td>Doris Wilder</td>
-						<td>Sales Assistant</td>
-						<td>Edinburgh</td>
-						<td>23</td>
-						<td>2010/09/20</td>
-						<td>$4,965</td>
-					</tr>
-					<tr>
-						<td>Angelica Ramos</td>
-						<td>System Architect</td>
-						<td>London</td>
-						<td>36</td>
-						<td>2009/10/09</td>
-						<td>$2,875</td>
-					</tr>
-					<tr>
-						<td>Gavin Joyce</td>
-						<td>Developer</td>
-						<td>Edinburgh</td>
-						<td>42</td>
-						<td>2010/12/22</td>
-						<td>$4,525</td>
-					</tr>
-					<tr>
-						<td>Jennifer Chang</td>
-						<td>Regional Director</td>
-						<td>London</td>
-						<td>28</td>
-						<td>2010/11/14</td>
-						<td>$4,080</td>
-					</tr>
-					<tr>
-						<td>Brenden Wagner</td>
-						<td>Software Engineer</td>
-						<td>San Francisco</td>
-						<td>18</td>
-						<td>2011/06/07</td>
-						<td>$3,750</td>
-					</tr>
-					<tr>
-						<td>Ebony Grimes</td>
-						<td>Software Engineer</td>
-						<td>San Francisco</td>
-						<td>48</td>
-						<td>2010/03/11</td>
-						<td>$2,875</td>
-					</tr>
-					<tr>
-						<td>Russell Chavez</td>
-						<td>Director</td>
-						<td>Edinburgh</td>
-						<td>20</td>
-						<td>2011/08/14</td>
-						<td>$3,600</td>
-					</tr>
-					<tr>
-						<td>Michelle House</td>
-						<td>Integration Specialist</td>
-						<td>Edinburgh</td>
-						<td>37</td>
-						<td>2011/06/02</td>
-						<td>$3,750</td>
-					</tr>
-					<tr>
-						<td>Suki Burks</td>
-						<td>Developer</td>
-						<td>London</td>
-						<td>53</td>
-						<td>2009/10/22</td>
-						<td>$2,875</td>
-					</tr>
-					<tr>
-						<td>Prescott Bartlett</td>
-						<td>Technical Author</td>
-						<td>London</td>
-						<td>27</td>
-						<td>2011/05/07</td>
-						<td>$6,730</td>
-					</tr>
-					<tr>
-						<td>Gavin Cortez</td>
-						<td>Technical Author</td>
-						<td>San Francisco</td>
-						<td>22</td>
-						<td>2008/10/26</td>
-						<td>$6,730</td>
-					</tr>
-					<tr>
-						<td>Martena Mccray</td>
-						<td>Integration Specialist</td>
-						<td>Edinburgh</td>
-						<td>46</td>
-						<td>2011/03/09</td>
-						<td>$4,080</td>
-					</tr>
-					<tr>
-						<td>Unity Butler</td>
-						<td>Senior Marketing Designer</td>
-						<td>San Francisco</td>
-						<td>47</td>
-						<td>2009/12/09</td>
-						<td>$3,750</td>
-					</tr>
-					<tr>
-						<td>Howard Hatfield</td>
-						<td>Financial Controller</td>
-						<td>San Francisco</td>
-						<td>51</td>
-						<td>2008/12/16</td>
-						<td>$4,080</td>
-					</tr>
-					<tr>
-						<td>Hope Fuentes</td>
-						<td>Financial Controller</td>
-						<td>San Francisco</td>
-						<td>41</td>
-						<td>2010/02/12</td>
-						<td>$4,200</td>
-					</tr>
-					<tr>
-						<td>Vivian Harrell</td>
-						<td>System Architect</td>
-						<td>San Francisco</td>
-						<td>62</td>
-						<td>2009/02/14</td>
-						<td>$4,965</td>
-					</tr>
-					<tr>
-						<td>Timothy Mooney</td>
-						<td>Financial Controller</td>
-						<td>London</td>
-						<td>37</td>
-						<td>2008/12/11</td>
-						<td>$4,200</td>
-					</tr>
-					<tr>
-						<td>Jackson Bradshaw</td>
-						<td>Director</td>
-						<td>New York</td>
-						<td>65</td>
-						<td>2008/09/26</td>
-						<td>$5,000</td>
-					</tr>
-					<tr>
-						<td>Miriam Weiss</td>
-						<td>Support Engineer</td>
-						<td>Edinburgh</td>
-						<td>64</td>
-						<td>2011/02/03</td>
-						<td>$4,965</td>
-					</tr>
-					<tr>
-						<td>Bruno Nash</td>
-						<td>Software Engineer</td>
-						<td>London</td>
-						<td>38</td>
-						<td>2011/05/03</td>
-						<td>$4,200</td>
-					</tr>
-					<tr>
-						<td>Odessa Jackson</td>
-						<td>Support Engineer</td>
-						<td>Edinburgh</td>
-						<td>37</td>
-						<td>2009/08/19</td>
-						<td>$3,600</td>
-					</tr>
-					<tr>
-						<td>Thor Walton</td>
-						<td>Developer</td>
-						<td>New York</td>
-						<td>61</td>
-						<td>2013/08/11</td>
-						<td>$3,600</td>
-					</tr>
-					<tr>
-						<td>Finn Camacho</td>
-						<td>Support Engineer</td>
-						<td>San Francisco</td>
-						<td>47</td>
-						<td>2009/07/07</td>
-						<td>$4,800</td>
-					</tr>
-					<tr>
-						<td>Elton Baldwin</td>
-						<td>Data Coordinator</td>
-						<td>Edinburgh</td>
-						<td>64</td>
-						<td>2012/04/09</td>
-						<td>$6,730</td>
-					</tr>
-					<tr>
-						<td>Zenaida Frank</td>
-						<td>Software Engineer</td>
-						<td>New York</td>
-						<td>63</td>
-						<td>2010/01/04</td>
-						<td>$4,800</td>
-					</tr>
-					<tr>
-						<td>Zorita Serrano</td>
-						<td>Software Engineer</td>
-						<td>San Francisco</td>
-						<td>56</td>
-						<td>2012/06/01</td>
-						<td>$5,300</td>
-					</tr>
-					<tr>
-						<td>Jennifer Acosta</td>
-						<td>Javascript Developer</td>
-						<td>Edinburgh</td>
-						<td>43</td>
-						<td>2013/02/01</td>
-						<td>$2,875</td>
-					</tr>
-					<tr>
-						<td>Cara Stevens</td>
-						<td>Sales Assistant</td>
-						<td>New York</td>
-						<td>46</td>
-						<td>2011/12/06</td>
-						<td>$4,800</td>
-					</tr>
-					<tr>
-						<td>Hermione Butler</td>
-						<td>Director</td>
-						<td>London</td>
-						<td>47</td>
-						<td>2011/03/21</td>
-						<td>$4,080</td>
-					</tr>
-					<tr>
-						<td>Lael Greer</td>
-						<td>Systems Administrator</td>
-						<td>London</td>
-						<td>21</td>
-						<td>2009/02/27</td>
-						<td>$3,120</td>
-					</tr>
-					<tr>
-						<td>Jonas Alexander</td>
-						<td>Developer</td>
-						<td>San Francisco</td>
-						<td>30</td>
-						<td>2010/07/14</td>
-						<td>$5,300</td>
-					</tr>
-					<tr>
-						<td>Shad Decker</td>
-						<td>Regional Director</td>
-						<td>Edinburgh</td>
-						<td>51</td>
-						<td>2008/11/13</td>
-						<td>$5,300</td>
-					</tr>
-					<tr>
-						<td>Michael Bruce</td>
-						<td>Javascript Developer</td>
-						<td>Edinburgh</td>
-						<td>29</td>
-						<td>2011/06/27</td>
-						<td>$4,080</td>
-					</tr>
-					<tr>
-						<td>Donna Snider</td>
-						<td>System Architect</td>
-						<td>New York</td>
-						<td>27</td>
-						<td>2011/01/25</td>
-						<td>$3,120</td>
-					</tr>
-				</tbody>
-			</table>
-
-			<ul class="tabs">
-				<li class="active">Javascript</li>
-				<li>HTML</li>
-				<li>CSS</li>
-				<li>Ajax</li>
-			</ul>
-
-			<div class="tabs">
-				<div class="js">
-					<p>The Javascript shown below is used to initialise the table shown in this example:</p>
-					<pre class="brush: js;">
-$(document).ready(function() {
-	$('#example').dataTable( {
-		&quot;scrollY&quot;:        200,
-		&quot;scrollCollapse&quot;: true,
-		&quot;jQueryUI&quot;:       true
-	} );
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
-					<ul>
-						<li><a href="../../media/js/jquery.js">../../media/js/jquery.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>
-						<pre class="brush: js;">
-
-</pre>
-					</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=
-						"//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css</a></li>
-						<li><a href=
-						"../../media/css/jquery.dataTables_themeroller.css">../../media/css/jquery.dataTables_themeroller.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>
-		</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 Init</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_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li class="active"><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</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 Init</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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</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">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="../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/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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</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/extras">extras</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> &#169; 2007-2013<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

@@ -3,23 +3,23 @@
 <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="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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( {
+	$('#example').DataTable( {
 		"ajax": '../ajax/data/arrays.txt'
 	} );
 } );
@@ -27,30 +27,22 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Ajax sourced data</span></h1>
-
+			<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/init/ajax"><code class="option" title="Initialisation option">ajax</code></a> option
-				to the address of the JSON data source.</p>
-
-				<p>The <a href="//datatables.net/init/ajax"><code class="option" title=
-				"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/init/ajax"><code class=
-				"option" title="Initialisation option">ajax</code></a> documentation or the other Ajax examples for
-				DataTables 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/init/columns.data"><code class=
-				"option" title="Initialisation option">columns.data</code></a> option ).</p>
+				<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>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -61,7 +53,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -73,223 +64,379 @@ $(document).ready(function() {
 					</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>
-					<pre class="brush: js;">
-$(document).ready(function() {
-	$('#example').dataTable( {
+					<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'
 	} );
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-
-</pre>
+						<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>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="./index.html">Data sources</a></h3>
 						<ul class="toc active">
-							<li><a href="./dom.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>
+							<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/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>
+							<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>
+						<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>
+							<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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/data_sources/index.html

@@ -3,61 +3,59 @@
 <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.5.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 - Data sources</title>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Data sources</span></h1>
-
+			<h1>DataTables example <span>Data sources</span></h1>
 			<div class="info">
-				<p>DataTables obtain data from four different fundamental sources:</p>
-
-				<ul>
+				<p>DataTables can obtain data from four different fundamental sources:</p>
+				<ul class="markdown">
 					<li>HTML document (DOM)</li>
 					<li>Javascript (array / objects)</li>
 					<li>Ajax sourced data with client-side processing</li>
 					<li>Ajax sourced data with server-side processing</li>
 				</ul>
-
-				<p>Where DataTables reads the data to use in the table from depends upon how the table is initialised.
-				The examples in this section show these four different data source types.</p>
+				<p>Which of these options is used to populate the table data depends upon how the table is initialised. The examples in this section show these four different data
+				source types.</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">Data Sources</a></h3>
+						<h3><a href="./index.html">Data sources</a></h3>
 						<ul class="toc">
-							<li><a href="./dom.html">DOM sourced data</a></li>
-							<li><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>
+							<li>
+								<a href="./dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<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>
-
 				<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/data_sources/js_array.html

@@ -3,404 +3,513 @@
 <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 - Javascript 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="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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">
-
+	
 
 var dataSet = [
-	['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']
+    [ "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", "Sydney", "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", "Sydney", "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" ]
 ];
 
 $(document).ready(function() {
-	$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
-
-	$('#example').dataTable( {
-		"data": dataSet,
-		"columns": [
-			{ "title": "Engine" },
-			{ "title": "Browser" },
-			{ "title": "Platform" },
-			{ "title": "Version", "class": "center" },
-			{ "title": "Grade", "class": "center" }
+	$('#example').DataTable( {
+		data: dataSet,
+		columns: [
+			{ title: "Name" },
+			{ title: "Position" },
+			{ title: "Office" },
+			{ title: "Extn." },
+			{ title: "Start date" },
+			{ title: "Salary" }
 		]
-	} );	
+	} );
 } );
 
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Javascript sourced data</span></h1>
-
+			<h1>DataTables example <span>Javascript sourced data</span></h1>
 			<div class="info">
-				<p>At times you will wish to be able to create a table from dynamic information passed directly to
-				DataTables, rather than having it read from the document. This is achieved using the <a href=
-				"//datatables.net/init/data"><code class="option" title="Initialisation option">data</code></a> option
-				in the initialisation object, passing in an array of data to be used (like all other DataTables handled
-				data, this can be arrays or objects using the <a href="//datatables.net/init/columns.data"><code class=
-				"option" title="Initialisation option">columns.data</code></a> option).</p>
-
-				<p>A <code>&lt;table&gt;</code> must be available on the page for DataTables to use. This examples
-				shows the element being added by Javascript and then initialising the DataTable with a set of data from
-				a Javascript array.</p>
+				<p>At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document. This
+				is achieved using the <a href="//datatables.net/reference/option/data"><code class="option" title="DataTables initialisation option">data</code></a> option in the
+				initialisation object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the <a href=
+				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option).</p>
+				<p>A <code class="tag" title="HTML tag">table</code> must be available on the page for DataTables to use. This examples shows an empty <code class="tag" title=
+				"HTML tag">table</code> element being initialising as a DataTable with a set of data from a Javascript array. The columns in the table are dynamically created
+				based on the <a href="//datatables.net/reference/option/columns.title"><code class="option" title="DataTables initialisation option">columns.title</code></a>
+				configuration option.</p>
 			</div>
-			<div id="demo">
-
+			<div class="demo-html"></div>
+			<table id="example" class="display" width="100%"></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>
-					<pre class="brush: js;">
-var dataSet = [
-	['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&lt;sup&gt;1&lt;/sup&gt;'],
-	['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']
+					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var dataSet = [
+    [ &quot;Tiger Nixon&quot;, &quot;System Architect&quot;, &quot;Edinburgh&quot;, &quot;5421&quot;, &quot;2011/04/25&quot;, &quot;$320,800&quot; ],
+    [ &quot;Garrett Winters&quot;, &quot;Accountant&quot;, &quot;Tokyo&quot;, &quot;8422&quot;, &quot;2011/07/25&quot;, &quot;$170,750&quot; ],
+    [ &quot;Ashton Cox&quot;, &quot;Junior Technical Author&quot;, &quot;San Francisco&quot;, &quot;1562&quot;, &quot;2009/01/12&quot;, &quot;$86,000&quot; ],
+    [ &quot;Cedric Kelly&quot;, &quot;Senior Javascript Developer&quot;, &quot;Edinburgh&quot;, &quot;6224&quot;, &quot;2012/03/29&quot;, &quot;$433,060&quot; ],
+    [ &quot;Airi Satou&quot;, &quot;Accountant&quot;, &quot;Tokyo&quot;, &quot;5407&quot;, &quot;2008/11/28&quot;, &quot;$162,700&quot; ],
+    [ &quot;Brielle Williamson&quot;, &quot;Integration Specialist&quot;, &quot;New York&quot;, &quot;4804&quot;, &quot;2012/12/02&quot;, &quot;$372,000&quot; ],
+    [ &quot;Herrod Chandler&quot;, &quot;Sales Assistant&quot;, &quot;San Francisco&quot;, &quot;9608&quot;, &quot;2012/08/06&quot;, &quot;$137,500&quot; ],
+    [ &quot;Rhona Davidson&quot;, &quot;Integration Specialist&quot;, &quot;Tokyo&quot;, &quot;6200&quot;, &quot;2010/10/14&quot;, &quot;$327,900&quot; ],
+    [ &quot;Colleen Hurst&quot;, &quot;Javascript Developer&quot;, &quot;San Francisco&quot;, &quot;2360&quot;, &quot;2009/09/15&quot;, &quot;$205,500&quot; ],
+    [ &quot;Sonya Frost&quot;, &quot;Software Engineer&quot;, &quot;Edinburgh&quot;, &quot;1667&quot;, &quot;2008/12/13&quot;, &quot;$103,600&quot; ],
+    [ &quot;Jena Gaines&quot;, &quot;Office Manager&quot;, &quot;London&quot;, &quot;3814&quot;, &quot;2008/12/19&quot;, &quot;$90,560&quot; ],
+    [ &quot;Quinn Flynn&quot;, &quot;Support Lead&quot;, &quot;Edinburgh&quot;, &quot;9497&quot;, &quot;2013/03/03&quot;, &quot;$342,000&quot; ],
+    [ &quot;Charde Marshall&quot;, &quot;Regional Director&quot;, &quot;San Francisco&quot;, &quot;6741&quot;, &quot;2008/10/16&quot;, &quot;$470,600&quot; ],
+    [ &quot;Haley Kennedy&quot;, &quot;Senior Marketing Designer&quot;, &quot;London&quot;, &quot;3597&quot;, &quot;2012/12/18&quot;, &quot;$313,500&quot; ],
+    [ &quot;Tatyana Fitzpatrick&quot;, &quot;Regional Director&quot;, &quot;London&quot;, &quot;1965&quot;, &quot;2010/03/17&quot;, &quot;$385,750&quot; ],
+    [ &quot;Michael Silva&quot;, &quot;Marketing Designer&quot;, &quot;London&quot;, &quot;1581&quot;, &quot;2012/11/27&quot;, &quot;$198,500&quot; ],
+    [ &quot;Paul Byrd&quot;, &quot;Chief Financial Officer (CFO)&quot;, &quot;New York&quot;, &quot;3059&quot;, &quot;2010/06/09&quot;, &quot;$725,000&quot; ],
+    [ &quot;Gloria Little&quot;, &quot;Systems Administrator&quot;, &quot;New York&quot;, &quot;1721&quot;, &quot;2009/04/10&quot;, &quot;$237,500&quot; ],
+    [ &quot;Bradley Greer&quot;, &quot;Software Engineer&quot;, &quot;London&quot;, &quot;2558&quot;, &quot;2012/10/13&quot;, &quot;$132,000&quot; ],
+    [ &quot;Dai Rios&quot;, &quot;Personnel Lead&quot;, &quot;Edinburgh&quot;, &quot;2290&quot;, &quot;2012/09/26&quot;, &quot;$217,500&quot; ],
+    [ &quot;Jenette Caldwell&quot;, &quot;Development Lead&quot;, &quot;New York&quot;, &quot;1937&quot;, &quot;2011/09/03&quot;, &quot;$345,000&quot; ],
+    [ &quot;Yuri Berry&quot;, &quot;Chief Marketing Officer (CMO)&quot;, &quot;New York&quot;, &quot;6154&quot;, &quot;2009/06/25&quot;, &quot;$675,000&quot; ],
+    [ &quot;Caesar Vance&quot;, &quot;Pre-Sales Support&quot;, &quot;New York&quot;, &quot;8330&quot;, &quot;2011/12/12&quot;, &quot;$106,450&quot; ],
+    [ &quot;Doris Wilder&quot;, &quot;Sales Assistant&quot;, &quot;Sydney&quot;, &quot;3023&quot;, &quot;2010/09/20&quot;, &quot;$85,600&quot; ],
+    [ &quot;Angelica Ramos&quot;, &quot;Chief Executive Officer (CEO)&quot;, &quot;London&quot;, &quot;5797&quot;, &quot;2009/10/09&quot;, &quot;$1,200,000&quot; ],
+    [ &quot;Gavin Joyce&quot;, &quot;Developer&quot;, &quot;Edinburgh&quot;, &quot;8822&quot;, &quot;2010/12/22&quot;, &quot;$92,575&quot; ],
+    [ &quot;Jennifer Chang&quot;, &quot;Regional Director&quot;, &quot;Singapore&quot;, &quot;9239&quot;, &quot;2010/11/14&quot;, &quot;$357,650&quot; ],
+    [ &quot;Brenden Wagner&quot;, &quot;Software Engineer&quot;, &quot;San Francisco&quot;, &quot;1314&quot;, &quot;2011/06/07&quot;, &quot;$206,850&quot; ],
+    [ &quot;Fiona Green&quot;, &quot;Chief Operating Officer (COO)&quot;, &quot;San Francisco&quot;, &quot;2947&quot;, &quot;2010/03/11&quot;, &quot;$850,000&quot; ],
+    [ &quot;Shou Itou&quot;, &quot;Regional Marketing&quot;, &quot;Tokyo&quot;, &quot;8899&quot;, &quot;2011/08/14&quot;, &quot;$163,000&quot; ],
+    [ &quot;Michelle House&quot;, &quot;Integration Specialist&quot;, &quot;Sydney&quot;, &quot;2769&quot;, &quot;2011/06/02&quot;, &quot;$95,400&quot; ],
+    [ &quot;Suki Burks&quot;, &quot;Developer&quot;, &quot;London&quot;, &quot;6832&quot;, &quot;2009/10/22&quot;, &quot;$114,500&quot; ],
+    [ &quot;Prescott Bartlett&quot;, &quot;Technical Author&quot;, &quot;London&quot;, &quot;3606&quot;, &quot;2011/05/07&quot;, &quot;$145,000&quot; ],
+    [ &quot;Gavin Cortez&quot;, &quot;Team Leader&quot;, &quot;San Francisco&quot;, &quot;2860&quot;, &quot;2008/10/26&quot;, &quot;$235,500&quot; ],
+    [ &quot;Martena Mccray&quot;, &quot;Post-Sales support&quot;, &quot;Edinburgh&quot;, &quot;8240&quot;, &quot;2011/03/09&quot;, &quot;$324,050&quot; ],
+    [ &quot;Unity Butler&quot;, &quot;Marketing Designer&quot;, &quot;San Francisco&quot;, &quot;5384&quot;, &quot;2009/12/09&quot;, &quot;$85,675&quot; ]
 ];
 
 $(document).ready(function() {
-	$('#demo').html( '&lt;table cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; border=&quot;0&quot; class=&quot;display&quot; id=&quot;example&quot;&gt;&lt;/table&gt;' );
-
-	$('#example').dataTable( {
-		&quot;data&quot;: dataSet,
-		&quot;columns&quot;: [
-			{ &quot;title&quot;: &quot;Engine&quot; },
-			{ &quot;title&quot;: &quot;Browser&quot; },
-			{ &quot;title&quot;: &quot;Platform&quot; },
-			{ &quot;title&quot;: &quot;Version&quot;, &quot;class&quot;: &quot;center&quot; },
-			{ &quot;title&quot;: &quot;Grade&quot;, &quot;class&quot;: &quot;center&quot; }
+	$('#example').DataTable( {
+		data: dataSet,
+		columns: [
+			{ title: &quot;Name&quot; },
+			{ title: &quot;Position&quot; },
+			{ title: &quot;Office&quot; },
+			{ title: &quot;Extn.&quot; },
+			{ title: &quot;Start date&quot; },
+			{ title: &quot;Salary&quot; }
 		]
-	} );	
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+	} );
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-
-</pre>
+						<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>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="./index.html">Data sources</a></h3>
 						<ul class="toc active">
-							<li><a href="./dom.html">DOM sourced data</a></li>
-							<li><a href="./ajax.html">Ajax sourced data</a></li>
-							<li class="active"><a href="./js_array.html">Javascript sourced data</a></li>
-							<li><a href="./server_side.html">Server-side processing</a></li>
+							<li>
+								<a href="./dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="./ajax.html">Ajax sourced data</a>
+							</li>
+							<li class="active">
+								<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/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>
+							<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>
+						<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>
+							<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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/data_sources/server_side.html

@@ -3,22 +3,22 @@
 <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 - Server-side processing</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="../../media/js/jquery.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.5.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( {
+	$('#example').DataTable( {
 		"processing": true,
 		"serverSide": true,
 		"ajax": "../server_side/scripts/server_processing.php"
@@ -27,272 +27,419 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Server-side processing</span></h1>
-
+			<h1>DataTables example <span>Server-side processing</span></h1>
 			<div class="info">
-				<p>There are many ways to get your data into DataTables, and if you are working with seriously large
-				databases, you might want to consider using the server-side options that DataTables provides. With
-				server-side processing enabled, all paging, searching, ordering actions that DataTables performs are
-				handed off to a server where an SQL engine (or similar) can perform these actions on the large data set
-				(after all, that's what the database engine is designed for!). As such, each draw of the table will
-				result in a new Ajax request being made to get the required data.</p>
-
-				<p>Server-side processing is enabled by setting the <a href=
-				"//datatables.net/init/serverSide"><code class="option" title=
-				"Initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data
-				source through the <a href="//datatables.net/init/ajax"><code class="option" title=
-				"Initialisation option">ajax</code></a> option.</p>
-
-				<p>This example shows a very simple table, matching the other examples, but in this instance using
-				server-side processing.</p>
+				<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side
+				options that DataTables provides. With server-side processing enabled, all paging, searching, ordering actions that DataTables performs are handed off to a server
+				where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such, each draw
+				of the table will result in a new Ajax request being made to get the required data.</p>
+				<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
+				"DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
+				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
+				<p>This example shows a very simple table, matching the other examples, but in this instance using server-side processing. For further and more complex examples of
+				using server-side processing, please refer to the <a href="../server_side">server-side processing</a> examples.</p>
 			</div>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
-						<th>Name</th>
+						<th>First name</th>
+						<th>Last 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>First name</th>
+						<th>Last 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>
-					<pre class="brush: js;">
-$(document).ready(function() {
-	$('#example').dataTable( {
+					<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;serverSide&quot;: true,
 		&quot;ajax&quot;: &quot;../server_side/scripts/server_processing.php&quot;
 	} );
-} );
-</pre>
-
-					<p>In addition to the above code, the following Javascript library files are loaded for use in this
-					example:</p>
-
+} );</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="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.5.1.js">https://code.jquery.com/jquery-3.5.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>
+					<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>
-						<pre class="brush: js;">
-
-</pre>
+						<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>
-
+					<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>
+						<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>
+					<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 Init</a></h3>
+						<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_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/scroll_y_theme.html">Scroll - vertical with jQuery UI
-							ThemeRoller</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<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/data_rendering.html">Data rendering</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 Init</a></h3>
+						<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 (rowspan /
-							colspan)</a></li>
-							<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</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>
+							<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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</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/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
+							<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>
+						<h3><a href="./index.html">Data sources</a></h3>
 						<ul class="toc active">
-							<li><a href="./dom.html">DOM sourced data</a></li>
-							<li><a href="./ajax.html">Ajax sourced data</a></li>
-							<li><a href="./js_array.html">Javascript sourced data</a></li>
-							<li class="active"><a href="./server_side.html">Server-side processing</a></li>
+							<li>
+								<a href="./dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="./ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="./js_array.html">Javascript sourced data</a>
+							</li>
+							<li class="active">
+								<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/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>
+							<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>
+						<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>
+							<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="../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 filtering (text inputs)</a></li>
-							<li><a href="../api/multi_filter_select.html">Individual column filtering (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 jQuery UI tabs</a></li>
-							<li><a href="../api/regex.html">Filtering API (regular expressions)</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 filter</a></li>
-							<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
+							<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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/index.html

@@ -0,0 +1,352 @@
+<!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.5.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 - Examples index</title>
+</head>
+<body class="dt-example">
+	<div class="container">
+		<section>
+			<h1>DataTables example <span>Examples index</span></h1>
+			<div class="info">
+				<p>One of the best ways to learn how to do anything new (including software APIs!) is to get your hands dirty as quickly as possible. These examples will show you
+				how to perform tasks ranging from something as simple as applying DataTables to an HTML table, right the way through to doing server-side processing with
+				pipelining and custom plug-in functions.</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="./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/data_rendering.html">Data rendering</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-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</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-2020<br>
+					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
+				</div>
+			</div>
+		</div>
+	</section>
+</body>
+</html>

examples/plug-ins/index.html

@@ -3,57 +3,57 @@
 <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.5.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 - Plug-ins</title>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>- Plug-ins</span></h1>
-
+			<h1>DataTables example <span>Plug-ins</span></h1>
 			<div class="info">
-				<p>While DataTables has a wide range of options and data type support built in, it can never cater for
-				every type of data out of the box. For this reason, DataTables exposes an extension API which allows
-				you, the developers using DataTables, to add support for your own data types, searching, ordering and
-				feature plug-ins.</p>
-
+				<p>While DataTables has a wide range of options and data type support built in, it can never cater for every type of data out of the box. For this reason,
+				DataTables exposes an extension API which allows you, the developers using DataTables, to add support for your own data types, searching, ordering and feature
+				plug-ins.</p>
 				<p>The examples in this section show how plug-ins can be used and developed for DataTables.</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">Plug-ins</a></h3>
 						<ul class="toc">
-							<li><a href="./api.html">API plug-in methods</a></li>
-							<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
-							<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
-							<li><a href="./range_filtering.html">Custom filtering - range filter</a></li>
-							<li><a href="./dom_sort.html">Live DOM ordering</a></li>
+							<li>
+								<a href="./api.html">API plug-in methods</a>
+							</li>
+							<li>
+								<a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a>
+							</li>
+							<li>
+								<a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a>
+							</li>
+							<li>
+								<a href="./range_filtering.html">Custom filtering - range search</a>
+							</li>
+							<li>
+								<a href="./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/extras">extras</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> &#169; 2007-2013<br>
+					<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-2020<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/resources/bootstrap/3/dataTables.bootstrap.css

@@ -1,204 +0,0 @@
-
-div.dataTables_length label {
-	font-weight: normal;
-	float: left;
-	text-align: left;
-}
-
-div.dataTables_length select {
-	width: 75px;
-}
-
-div.dataTables_filter label {
-	font-weight: normal;
-	float: right;
-}
-
-div.dataTables_filter input {
-	width: 16em;
-}
-
-div.dataTables_info {
-	padding-top: 8px;
-}
-
-div.dataTables_paginate {
-	float: right;
-	margin: 0;
-}
-
-div.dataTables_paginate ul.pagination {
-	margin: 2px;
-}
-
-table.table {
-	clear: both;
-	margin-top: 6px !important;
-	margin-bottom: 6px !important;
-	max-width: none !important;
-}
-
-table.table thead .sorting,
-table.table thead .sorting_asc,
-table.table thead .sorting_desc,
-table.table thead .sorting_asc_disabled,
-table.table thead .sorting_desc_disabled {
-	cursor: pointer;
-}
-
-table.table thead .sorting { background: url('../images/sort_both.png') no-repeat center right; }
-table.table thead .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
-table.table thead .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }
-
-table.table thead .sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }
-table.table thead .sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; }
-
-table.dataTable th:active {
-	outline: none;
-}
-
-/* Scrolling */
-div.dataTables_scrollHead table {
-	margin-bottom: 0 !important;
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-}
-
-div.dataTables_scrollHead table thead tr:last-child th:first-child,
-div.dataTables_scrollHead table thead tr:last-child td:first-child {
-	border-bottom-left-radius: 0 !important;
-	border-bottom-right-radius: 0 !important;
-}
-
-div.dataTables_scrollBody table {
-	border-top: none;
-	margin-bottom: 0 !important;
-}
-
-div.dataTables_scrollBody tbody tr:first-child th,
-div.dataTables_scrollBody tbody tr:first-child td {
-	border-top: none;
-}
-
-div.dataTables_scrollFoot table {
-	border-top: none;
-}
-
-
-
-
-/*
- * TableTools styles
- */
-.table tbody tr.active td,
-.table tbody tr.active th {
-	background-color: #08C;
-	color: white;
-}
-
-.table tbody tr.active:hover td,
-.table tbody tr.active:hover th {
-	background-color: #0075b0 !important;
-}
-
-.table-striped tbody tr.active:nth-child(odd) td,
-.table-striped tbody tr.active:nth-child(odd) th {
-	background-color: #017ebc;
-}
-
-table.DTTT_selectable tbody tr {
-	cursor: pointer;
-}
-
-div.DTTT .btn {
-	color: #333 !important;
-	font-size: 12px;
-}
-
-div.DTTT .btn:hover {
-	text-decoration: none !important;
-}
-
-ul.DTTT_dropdown.dropdown-menu {
-  z-index: 2003;
-}
-
-ul.DTTT_dropdown.dropdown-menu a {
-	color: #333 !important; /* needed only when demo_page.css is included */
-}
-
-ul.DTTT_dropdown.dropdown-menu li {
-	position: relative;
-}
-
-ul.DTTT_dropdown.dropdown-menu li:hover a {
-	background-color: #0088cc;
-	color: white !important;
-}
-
-/* TableTools information display */
-div.DTTT_print_info.modal {
-	height: 150px;
-	margin-top: -75px;
-	text-align: center;
-}
-
-div.DTTT_print_info h6 {
-	font-weight: normal;
-	font-size: 28px;
-	line-height: 28px;
-	margin: 1em;
-}
-
-div.DTTT_print_info p {
-	font-size: 14px;
-	line-height: 20px;
-}
-
-
-
-/*
- * FixedColumns styles
- */
-div.DTFC_LeftHeadWrapper table,
-div.DTFC_LeftFootWrapper table,
-div.DTFC_RightHeadWrapper table,
-div.DTFC_RightFootWrapper table,
-table.DTFC_Cloned tr.even {
-    background-color: white;
-}
- 
-div.DTFC_RightHeadWrapper table ,
-div.DTFC_LeftHeadWrapper table {
-    margin-bottom: 0 !important;
-    border-top-right-radius: 0 !important;
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-}
- 
-div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
-div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
-div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
-div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
-    border-bottom-left-radius: 0 !important;
-    border-bottom-right-radius: 0 !important;
-}
- 
-div.DTFC_RightBodyWrapper table,
-div.DTFC_LeftBodyWrapper table {
-    border-top: none;
-    margin-bottom: 0 !important;
-}
- 
-div.DTFC_RightBodyWrapper tbody tr:first-child th,
-div.DTFC_RightBodyWrapper tbody tr:first-child td,
-div.DTFC_LeftBodyWrapper tbody tr:first-child th,
-div.DTFC_LeftBodyWrapper tbody tr:first-child td {
-    border-top: none;
-}
- 
-div.DTFC_RightFootWrapper table,
-div.DTFC_LeftFootWrapper table {
-    border-top: none;
-}
-

examples/resources/bootstrap/3/dataTables.bootstrap.js

@@ -1,152 +0,0 @@
-/* Set the defaults for DataTables initialisation */
-$.extend( true, $.fn.dataTable.defaults, {
-	"sDom": "<'row'<'col-xs-6'l><'col-xs-6'f>r>t<'row'<'col-xs-6'i><'col-xs-6'p>>",
-	"sPaginationType": "bootstrap",
-	"oLanguage": {
-		"sLengthMenu": "_MENU_ records per page"
-	}
-} );
-
-
-
-
-/* Default class modification */
-$.extend( $.fn.dataTableExt.oStdClasses, {
-	"sWrapper": "dataTables_wrapper form-inline",
-	"sFilterInput": "form-control input-sm",
-	"sLengthSelect": "form-control input-sm"
-} );
-
-
-/* API method to get paging information */
-$.fn.dataTableExt.oApi.fnPagingInfo = function ( oSettings )
-{
-	return {
-		"iStart":         oSettings._iDisplayStart,
-		"iEnd":           oSettings.fnDisplayEnd(),
-		"iLength":        oSettings._iDisplayLength,
-		"iTotal":         oSettings.fnRecordsTotal(),
-		"iFilteredTotal": oSettings.fnRecordsDisplay(),
-		"iPage":          oSettings._iDisplayLength === -1 ?
-			0 : Math.ceil( oSettings._iDisplayStart / oSettings._iDisplayLength ),
-		"iTotalPages":    oSettings._iDisplayLength === -1 ?
-			0 : Math.ceil( oSettings.fnRecordsDisplay() / oSettings._iDisplayLength )
-	};
-};
-
-
-/* Bootstrap style pagination control */
-$.extend( $.fn.dataTableExt.oPagination, {
-	"bootstrap": {
-		"fnInit": function( oSettings, nPaging, fnDraw ) {
-			var oLang = oSettings.oLanguage.oPaginate;
-			var fnClickHandler = function ( e ) {
-				e.preventDefault();
-				if ( oSettings.oApi._fnPageChange(oSettings, e.data.action) ) {
-					fnDraw( oSettings );
-				}
-			};
-
-			$(nPaging).append(
-				'<ul class="pagination">'+
-					'<li class="prev disabled"><a href="#">&larr; '+oLang.sPrevious+'</a></li>'+
-					'<li class="next disabled"><a href="#">'+oLang.sNext+' &rarr; </a></li>'+
-				'</ul>'
-			);
-			var els = $('a', nPaging);
-			$(els[0]).bind( 'click.DT', { action: "previous" }, fnClickHandler );
-			$(els[1]).bind( 'click.DT', { action: "next" }, fnClickHandler );
-		},
-
-		"fnUpdate": function ( oSettings, fnDraw ) {
-			var iListLength = 5;
-			var oPaging = oSettings.oInstance.fnPagingInfo();
-			var an = oSettings.aanFeatures.p;
-			var i, ien, j, sClass, iStart, iEnd, iHalf=Math.floor(iListLength/2);
-
-			if ( oPaging.iTotalPages < iListLength) {
-				iStart = 1;
-				iEnd = oPaging.iTotalPages;
-			}
-			else if ( oPaging.iPage <= iHalf ) {
-				iStart = 1;
-				iEnd = iListLength;
-			} else if ( oPaging.iPage >= (oPaging.iTotalPages-iHalf) ) {
-				iStart = oPaging.iTotalPages - iListLength + 1;
-				iEnd = oPaging.iTotalPages;
-			} else {
-				iStart = oPaging.iPage - iHalf + 1;
-				iEnd = iStart + iListLength - 1;
-			}
-
-			for ( i=0, ien=an.length ; i<ien ; i++ ) {
-				// Remove the middle elements
-				$('li:gt(0)', an[i]).filter(':not(:last)').remove();
-
-				// Add the new list items and their event handlers
-				for ( j=iStart ; j<=iEnd ; j++ ) {
-					sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
-					$('<li '+sClass+'><a href="#">'+j+'</a></li>')
-						.insertBefore( $('li:last', an[i])[0] )
-						.bind('click', function (e) {
-							e.preventDefault();
-							oSettings._iDisplayStart = (parseInt($('a', this).text(),10)-1) * oPaging.iLength;
-							fnDraw( oSettings );
-						} );
-				}
-
-				// Add / remove disabled classes from the static elements
-				if ( oPaging.iPage === 0 ) {
-					$('li:first', an[i]).addClass('disabled');
-				} else {
-					$('li:first', an[i]).removeClass('disabled');
-				}
-
-				if ( oPaging.iPage === oPaging.iTotalPages-1 || oPaging.iTotalPages === 0 ) {
-					$('li:last', an[i]).addClass('disabled');
-				} else {
-					$('li:last', an[i]).removeClass('disabled');
-				}
-			}
-		}
-	}
-} );
-
-
-/*
- * TableTools Bootstrap compatibility
- * Required TableTools 2.1+
- */
-if ( $.fn.DataTable.TableTools ) {
-	// Set the classes that TableTools uses to something suitable for Bootstrap
-	$.extend( true, $.fn.DataTable.TableTools.classes, {
-		"container": "DTTT btn-group",
-		"buttons": {
-			"normal": "btn btn-default",
-			"disabled": "disabled"
-		},
-		"collection": {
-			"container": "DTTT_dropdown dropdown-menu",
-			"buttons": {
-				"normal": "",
-				"disabled": "disabled"
-			}
-		},
-		"print": {
-			"info": "DTTT_print_info modal"
-		},
-		"select": {
-			"row": "active"
-		}
-	} );
-
-	// Have the collection use a bootstrap compatible dropdown
-	$.extend( true, $.fn.DataTable.TableTools.DEFAULTS.oTags, {
-		"collection": {
-			"container": "ul",
-			"button": "li",
-			"liner": "a"
-		}
-	} );
-}
-

examples/resources/bootstrap/3/index.html

@@ -1,442 +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" />
-		
-		<title>DataTables Bootstrap 2 example</title>
-
-		<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap.min.css">
-		<link rel="stylesheet" type="text/css" href="dataTables.bootstrap.css">
-
-		<script type="text/javascript" language="javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
-		<script type="text/javascript" language="javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
-		<script type="text/javascript" language="javascript" src="dataTables.bootstrap.js"></script>
-		<script type="text/javascript" charset="utf-8">
-			$(document).ready(function() {
-				$('#example').dataTable();
-			} );
-		</script>
-	</head>
-	<body>
-		<div class="container">
-			
-<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" 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="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>
-</table>
-			
-		</div>
-	</body>
-</html>