Latest integraiton file for consistency

- Search would insert them into the document

.datatables-commit-sync

@@ -1 +1 @@
-5532f39202605562f7c93de5d329cd0a488513ca
+c7bd54a8ab7c021b10d16ac228a2120ba7d5277e

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

@@ -11,9 +11,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. See the [DataTables manual](http://datatables.net/manual/installation#Including-Javascript-/-CSS) for details on how to do this using the latest version of DataTables.
+To use DataTables, the primary way to obtain the software is to use the [DataTables downloader](//datatables.net/download). You can also include the individual files from the [DataTables CDN](//cdn.datatables.net). See the [documentation](//datatables.net/manual/installation) for full details.
+
+### NPM and Bower
+
+If you prefer to use a package manager such as NPM or Bower, distribution repositories are available with software built from this repository under the name `datatables.net`. Styling packages for Bootstrap, Foundation and other styling libraries are also available by adding a suffix to the package name.
+
+Please see the DataTables [NPM](//datatables.net/download/npm) and [Bower](//datatables.net/download/bower) installation pages for further information. The [DataTables installation manual](//datatables.net/manual/installation) also has details on how to use package managers with DataTables.
 
 
 ## Usage
@@ -40,7 +46,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

bower.json

@@ -1,6 +1,5 @@
 {
 	"name": "datatables",
-	"version": "1.10.8",
 	"main": [
 		"media/js/jquery.dataTables.js",
 		"media/css/jquery.dataTables.css",

composer.json

@@ -1,6 +1,6 @@
 {
 	"name": "datatables/datatables",
-	"version": "1.10.8",
+	"version": "1.10.19",
 	"description": "DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.", 
 	"homepage": "http://www.datatables.net/",
 	"author": "SpryMedia", 

dataTables.jquery.json

@@ -1,6 +1,6 @@
 {
 	"name": "DataTables",
-	"version": "1.10.8",
+	"version": "1.10.19",
 	"description": "DataTables enhances HTML tables with the ability to sort, filter and page the data in the table very easily. It provides a comprehensive API and set of configuration options, allowing you to consume data from virtually any data source.",
 	"homepage": "http://datatables.net/",
 	"docs": "http://datatables.net/",

examples/advanced_init/column_render.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Column rendering</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -39,24 +38,21 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Column rendering</span></h1>
-
 			<div class="info">
 				<p>Each column has an optional rendering control called <a href="//datatables.net/reference/option/columns.render"><code class="option" title=
 				"DataTables initialisation option">columns.render</code></a> which can be used to process the content of each cell before the data is used. <a href=
 				"//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> has a wide array of
 				options available to it for rendering different types of data orthogonally (ordering, searching, display etc), but it can be used very simply to manipulate the
 				content of a cell, as shown here.</p>
-
 				<p>This example shows the person's age combined with their name in the first column, hiding the age column. This technique can be useful for adding links,
 				assigning colours based on content rules and any other form of text manipulation you require.</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>
@@ -67,18 +63,6 @@ $(document).ready(function() {
 						<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>
@@ -537,8 +521,17 @@ $(document).ready(function() {
 						<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>
@@ -546,7 +539,6 @@ $(document).ready(function() {
 				<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() {
@@ -565,37 +557,35 @@ $(document).ready(function() {
 		]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -604,155 +594,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li class="active"><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>
+							<li>
+								<a href="./events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="./dt_events.html">DataTables events</a>
+							</li>
+							<li class="active">
+								<a href="./column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div 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</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/complex_header.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Complex headers with column visibility</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -31,29 +30,24 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Complex headers with column visibility</span></h1>
-
 			<div class="info">
 				<p>Complex headers (using <code>colspan</code> / <code>rowspan</code>) can be used to group columns of similar information in DataTables, creating a very powerful
 				visual effect.</p>
-
-				<p>In addition to the basic behaviour, DataTables can also take <code>colspan</code> and <code>rowspan</code>s into account when working with hidden columns. The
+				<p>In addition to the basic behaviour, DataTables can also take <code>colspan</code> and <code>rowspan</code> into account when working with hidden columns. The
 				<code>colspan</code> and <code>rowspan</code> attributes for each cell are automatically calculated and rendered on the page for you. This allows the <a href=
 				"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a> option and <a href=
 				"//datatables.net/reference/api/column().visible()"><code class="api" title="DataTables API method">column().visible()</code></a> method to take into account
 				<code>rowspan</code> / <code>colspan</code> cells, drawing the header correctly.</p>
-
 				<p>Note that each column must have at least one unique cell (i.e. a cell without <code>colspan</code>) so DataTables can use that cell to detect the column and use
 				it to apply ordering.</p>
-
 				<p>The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden.</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 rowspan="2">Name</th>
@@ -68,18 +62,6 @@ $(document).ready(function() {
 						<th>E-mail</th>
 					</tr>
 				</thead>
-
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Salary</th>
-						<th>Office</th>
-						<th>Extn.</th>
-						<th>E-mail</th>
-					</tr>
-				</tfoot>
-
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -538,8 +520,17 @@ $(document).ready(function() {
 						<td>d.snider@datatables.net</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Salary</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>E-mail</th>
+					</tr>
+				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -547,7 +538,6 @@ $(document).ready(function() {
 				<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() {
@@ -558,37 +548,35 @@ $(document).ready(function() {
 		} ]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -597,155 +585,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li class="active"><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>
+							<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 class="active">
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div 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</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/defaults.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Setting defaults</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $.extend( true, $.fn.dataTable.defaults, {
 	"searching": false,
@@ -32,22 +31,19 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Setting defaults</span></h1>
-
 			<div class="info">
 				<p>When working with DataTables over multiple pages it is often useful to set the initialisation defaults to common values (for example you might want to set
 				<a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> to a common value so all tables get
 				the same layout). This can be done using the <code>$.fn.dataTable.defaults</code> object. This object will take all of the same parameters as the DataTables
 				initialisation object, but in this case you are setting the default for all future initialisations of DataTables.</p>
-
 				<p>This example shows the searching and ordering features of DataTables being disabled by default, which is reflected in the table when it is initialised.</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>
@@ -58,18 +54,6 @@ $(document).ready(function() {
 						<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>
@@ -528,8 +512,17 @@ $(document).ready(function() {
 						<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>
@@ -537,7 +530,6 @@ $(document).ready(function() {
 				<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">$.extend( true, $.fn.dataTable.defaults, {
@@ -549,37 +541,35 @@ $(document).ready(function() {
 $(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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -588,155 +578,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="./html5-data-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 class="active"><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-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li class="active">
+								<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</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/dom_multiple_elements.html

@@ -3,14 +3,13 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Multiple table control elements</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_length {
 	padding-left: 2em;
 	}
@@ -20,12 +19,12 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -36,25 +35,21 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Multiple table control elements</span></h1>
-
 			<div class="info">
 				<p>As is described by the basic DOM positioning example you can use the <a href="//datatables.net/reference/option/dom"><code class="option" title=
 				"DataTables initialisation option">dom</code></a> initialisation parameter to move DataTables features around the table to where you want them.</p>
-
 				<p>In addition to this, you can also use <a href="//datatables.net/reference/option/dom"><code class="option" title=
 				"DataTables initialisation option">dom</code></a> to create multiple instances of these table controls. Simply include the feature's identification letter where
 				you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table (<code class="string" title="String">t</code>)
 				should be included only once).</p>
-
-				<p>This is shown in the demo below where for four key build-in features are duplicated above and below the table.</p>
+				<p>This is shown in the demo below where the four key built-in features are duplicated above and below the table.</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>
@@ -65,18 +60,6 @@ $(document).ready(function() {
 						<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>
@@ -535,8 +518,17 @@ $(document).ready(function() {
 						<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>
@@ -544,7 +536,6 @@ $(document).ready(function() {
 				<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() {
@@ -552,19 +543,19 @@ $(document).ready(function() {
 		&quot;dom&quot;: '&lt;&quot;top&quot;iflp&lt;&quot;clear&quot;&gt;&gt;rt&lt;&quot;bottom&quot;iflp&lt;&quot;clear&quot;&gt;&gt;'
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
@@ -576,19 +567,17 @@ $(document).ready(function() {
 		padding-top: 0.55em;
 	}</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="../../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
@@ -597,155 +586,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li class="active"><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>
+							<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 class="active">
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div 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</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/dom_toolbar.html

@@ -3,14 +3,13 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Custom toolbar elements</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">
-
+	
 
 .toolbar {
 	float: left;
@@ -18,12 +17,12 @@
 
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -36,28 +35,25 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Custom toolbar elements</span></h1>
-
 			<div class="info">
 				<p>DataTables inserts DOM elements around the table to control DataTables features, and you can make use of this mechanism as well to insert your own custom
-				elements. In this example a <code class="tag" title="HTML tag">div</code> with a class of 'toolbar' is created using <a href=
-				"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a>, with which HTML is inserted to create the
-				toolbar. You could put whatever HTML you want into the toolbar and add event handlers etc.</p>
-
+				elements. In this example a <code class="tag" title="HTML tag">div</code> with a class of '-string toolbar' is created using <a href=
+				"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a>, and jQuery then used to insert HTML into that
+				element to create the toolbar. You could put whatever HTML you want into the toolbar!</p>
 				<p>For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in API available, which can be used to create plug-ins which
 				are used in a table by a single character reference in the <a href="//datatables.net/reference/option/dom"><code class="option" title=
 				"DataTables initialisation option">dom</code></a> option (like the built in option of <code class="string" title="String">f</code> refers to 'filtering input', you
 				could have an <code class="string" title="String">F</code> option which creates your own filtering input control, custom to your app).</p>
-
-				<p><a href="https://datatables.net/extras/tabletools">TableTools</a> is a feature plug-in for DataTables which adds buttons into a toolbar for a table, which
-				controls such as copy to clipboard, export and custom buttons.</p>
+				<p>There are a number of <a href="//datatables.net/extensions">extensions for DataTables</a> that make use of this ability. For example, <a href=
+				"//datatables.net/extensions/buttons">Buttons</a> is a feature plug-in for DataTables that adds buttons into a toolbar for a table (copy to clipboard, save to
+				Excel / PDF, and more).</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>
@@ -68,18 +64,6 @@ $(document).ready(function() {
 						<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>
@@ -538,8 +522,17 @@ $(document).ready(function() {
 						<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>
@@ -547,7 +540,6 @@ $(document).ready(function() {
 				<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() {
@@ -557,19 +549,19 @@ $(document).ready(function() {
 
 	$(&quot;div.toolbar&quot;).html('&lt;b&gt;Custom tool bar! Text/images etc.&lt;/b&gt;');
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
@@ -577,19 +569,17 @@ $(document).ready(function() {
 	float: left;
 }</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="../../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
@@ -598,155 +588,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="./html5-data-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 class="active"><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-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li class="active">
+								<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</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/dt_events.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - DataTables events</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	var eventFired = function ( type ) {
@@ -36,29 +35,25 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>DataTables events</span></h1>
-
 			<div class="info">
 				<p>DataTables fires a number of custom events which you can bind to in the standard jQuery fashion (although note that the namespace <code>dt</code> <em>must</em>
 				be used), allowing your code to perform custom actions when these events occur.</p>
-
 				<p>All custom events fired by DataTables are fired with the namespace <code>dt</code> in order to prevent conflicts arising with other jQuery plug-ins which also
 				fire events. The DataTables <a href="//datatables.net/reference/api/on()"><code class="api" title="DataTables API method">on()</code></a> method can be used like
 				the jQuery <code>on()</code> method, but will automatically append the <code>dt</code> namespace if required.</p>
-
 				<p>This example shows the use of the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order</code></a>, <a href=
 				"//datatables.net/reference/event/search"><code class="event" title="DataTables event">search</code></a> and <a href=
 				"//datatables.net/reference/event/page"><code class="event" title="DataTables event">page</code></a> events by adding a notification that the event fired to an
 				element on the page to show that they have indeed fired.</p>
 			</div>
-
-			<div id="demo_info" class="box"></div>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html">
+				<div id="demo_info" class="box"></div>
+			</div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -69,18 +64,6 @@ $(document).ready(function() {
 						<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>
@@ -539,8 +522,17 @@ $(document).ready(function() {
 						<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>
@@ -548,7 +540,6 @@ $(document).ready(function() {
 				<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() {
@@ -564,37 +555,35 @@ $(document).ready(function() {
 		.on( 'page.dt',   function () { eventFired( 'Page' ); } )
 		.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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -603,155 +592,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li class="active"><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>
+							<li>
+								<a href="./events_live.html">DOM / jQuery events</a>
+							</li>
+							<li class="active">
+								<a href="./dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="./column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div 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</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/events_live.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - DOM / jQuery events</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	var table = $('#example').DataTable();
@@ -31,23 +30,20 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>DOM / jQuery events</span></h1>
-
 			<div class="info">
 				<p>Events assigned to the table can be exceptionally useful for user interaction, however you must be aware that DataTables will add and remove rows from the DOM
 				as they are needed (i.e. when paging only the visible elements are actually available in the DOM). As such, this can lead to the odd hiccup when working with
 				events.</p>
-
 				<p>One of the best ways of dealing with this is through the use of delegated events with jQuery's <code>on</code> method, as shown in this example. This example
 				also uses the DataTables <a href="//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()</code></a> method to
 				retrieve information about the selected row - the row's data so we can show it in the <code>alert</code> message in this case.</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>
@@ -58,18 +54,6 @@ $(document).ready(function() {
 						<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>
@@ -528,8 +512,17 @@ $(document).ready(function() {
 						<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>
@@ -537,7 +530,6 @@ $(document).ready(function() {
 				<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() {
@@ -548,37 +540,35 @@ $(document).ready(function() {
 		alert( 'You clicked on '+data[0]+'\'s row' );
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -587,155 +577,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li class="active"><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>
+							<li class="active">
+								<a href="./events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="./dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="./column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div 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</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/footer_callback.html

@@ -3,23 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Footer callback</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">
-
+	
 	th { white-space: nowrap; }
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -40,7 +39,7 @@ $(document).ready(function() {
 				.data()
 				.reduce( function (a, b) {
 					return intVal(a) + intVal(b);
-				} );
+				}, 0 );
 
 			// Total over this page
 			pageTotal = api
@@ -61,25 +60,22 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Footer callback</span></h1>
-
 			<div class="info">
 				<p>Through the use of the header and footer callback manipulation functions provided by DataTables (<a href=
 				"//datatables.net/reference/option/headerCallback"><code class="option" title="DataTables initialisation option">headerCallback</code></a> and <a href=
 				"//datatables.net/reference/option/footerCallback"><code class="option" title="DataTables initialisation option">footerCallback</code></a>), it is possible to
 				perform some powerful and useful data manipulation functions, such as summarising data in the table.</p>
-
 				<p>The example below shows a footer callback being used to total the data for a column (both the visible and the hidden data) using the <a href=
 				"//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()</code></a> API method and <a href=
 				"//datatables.net/reference/api/column().footer()"><code class="api" title="DataTables API method">column().footer()</code></a> for writing the value into the
 				footer.</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>First name</th>
@@ -89,14 +85,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
-				<tfoot>
-					<tr>
-						<th colspan="4" style="text-align:right">Total:</th>
-						<th></th>
-					</tr>
-				</tfoot>
-
 				<tbody>
 					<tr>
 						<td>Tiger</td>
@@ -498,8 +486,13 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th colspan="4" style="text-align:right">Total:</th>
+						<th></th>
+					</tr>
+				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -507,7 +500,6 @@ $(document).ready(function() {
 				<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() {
@@ -529,7 +521,7 @@ $(document).ready(function() {
 				.data()
 				.reduce( function (a, b) {
 					return intVal(a) + intVal(b);
-				} );
+				}, 0 );
 
 			// Total over this page
 			pageTotal = api
@@ -546,37 +538,35 @@ $(document).ready(function() {
 		}
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css">th { white-space: nowrap; }</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="../../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
@@ -585,155 +575,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="./html5-data-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 class="active"><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-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li class="active">
+								<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</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/html5-data-attributes.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - HTML5 data-* attributes - cell data</title>
 	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
 	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
 	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
 	<style type="text/css" class="init">
-
+	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable();
@@ -26,33 +25,28 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>HTML5 data-* attributes - cell data</span></h1>
-
 			<div class="info">
 				<p>DataTables can use different data for different actions (display, ordering and searching) which can be immensely powerful for transforming data in the display
 				to be intuitive for the end user, while using different, or more complex data, for other actions. For example, if a table contains a formatted telephone number in
 				the format <code>xxx-xxxx</code>, intuitively a user might search for the number but without a dash. Using orthogonal data for searching allows both forms of the
 				telephone number to be used, while only the nicely formatted number is displayed in the table.</p>
-
 				<p>One method in which DataTables can obtain this orthogonal data for its different actions is through <a href=
 				"http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">custom HTML5 data attributes</a>. DataTables
 				will automatically detect four different attributes on the HTML elements:</p>
-
 				<ul class="markdown">
 					<li><code>data-sort</code> or <code>data-order</code> - for ordering data</li>
 					<li><code>data-filter</code> or <code>data-search</code> - for search data</li>
 				</ul>
-
 				<p>This example shows the use of <code>data-sort</code> and <code>data-filter</code> attributes. In this case the first column has been formatted so the first name
 				has abbreviated, but the full name is still searchable (search for "Bruno" for example). Additionally, although the last column contains non-numeric data in it,
 				the column will correctly order numerically as the <code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric data.</p>
 			</div>
-
-			<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>
@@ -63,25 +57,13 @@ $(document).ready(function() {
 						<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 data-search="Tiger Nixon">T. Nixon</td>
 						<td>System Architect</td>
 						<td>Edinburgh</td>
 						<td>61</td>
-						<td data-order="1303686000">Mon 25th Apr 11</td>
+						<td data-order="1303689600">Mon 25th Apr 11</td>
 						<td data-order="320800">$320,800/y</td>
 					</tr>
 					<tr>
@@ -89,7 +71,7 @@ $(document).ready(function() {
 						<td>Accountant</td>
 						<td>Tokyo</td>
 						<td>63</td>
-						<td data-order="1311548400">Mon 25th Jul 11</td>
+						<td data-order="1311552000">Mon 25th Jul 11</td>
 						<td data-order="170750">$170,750/y</td>
 					</tr>
 					<tr>
@@ -105,7 +87,7 @@ $(document).ready(function() {
 						<td>Senior Javascript Developer</td>
 						<td>Edinburgh</td>
 						<td>22</td>
-						<td data-order="1332975600">Thu 29th Mar 12</td>
+						<td data-order="1332979200">Thu 29th Mar 12</td>
 						<td data-order="433060">$433,060/y</td>
 					</tr>
 					<tr>
@@ -129,7 +111,7 @@ $(document).ready(function() {
 						<td>Sales Assistant</td>
 						<td>San Francisco</td>
 						<td>59</td>
-						<td data-order="1344207600">Mon 6th Aug 12</td>
+						<td data-order="1344211200">Mon 6th Aug 12</td>
 						<td data-order="137500">$137,500/y</td>
 					</tr>
 					<tr>
@@ -137,7 +119,7 @@ $(document).ready(function() {
 						<td>Integration Specialist</td>
 						<td>Tokyo</td>
 						<td>55</td>
-						<td data-order="1287010800">Thu 14th Oct 10</td>
+						<td data-order="1287014400">Thu 14th Oct 10</td>
 						<td data-order="327900">$327,900/y</td>
 					</tr>
 					<tr>
@@ -145,7 +127,7 @@ $(document).ready(function() {
 						<td>Javascript Developer</td>
 						<td>San Francisco</td>
 						<td>39</td>
-						<td data-order="1252969200">Tue 15th Sep 09</td>
+						<td data-order="1252972800">Tue 15th Sep 09</td>
 						<td data-order="205500">$205,500/y</td>
 					</tr>
 					<tr>
@@ -177,7 +159,7 @@ $(document).ready(function() {
 						<td>Regional Director</td>
 						<td>San Francisco</td>
 						<td>36</td>
-						<td data-order="1224111600">Thu 16th Oct 08</td>
+						<td data-order="1224115200">Thu 16th Oct 08</td>
 						<td data-order="470600">$470,600/y</td>
 					</tr>
 					<tr>
@@ -209,7 +191,7 @@ $(document).ready(function() {
 						<td>Chief Financial Officer (CFO)</td>
 						<td>New York</td>
 						<td>64</td>
-						<td data-order="1276038000">Wed 9th Jun 10</td>
+						<td data-order="1276041600">Wed 9th Jun 10</td>
 						<td data-order="725000">$725,000/y</td>
 					</tr>
 					<tr>
@@ -217,7 +199,7 @@ $(document).ready(function() {
 						<td>Systems Administrator</td>
 						<td>New York</td>
 						<td>59</td>
-						<td data-order="1239318000">Fri 10th Apr 09</td>
+						<td data-order="1239321600">Fri 10th Apr 09</td>
 						<td data-order="237500">$237,500/y</td>
 					</tr>
 					<tr>
@@ -225,7 +207,7 @@ $(document).ready(function() {
 						<td>Software Engineer</td>
 						<td>London</td>
 						<td>41</td>
-						<td data-order="1350082800">Sat 13th Oct 12</td>
+						<td data-order="1350086400">Sat 13th Oct 12</td>
 						<td data-order="132000">$132,000/y</td>
 					</tr>
 					<tr>
@@ -233,7 +215,7 @@ $(document).ready(function() {
 						<td>Personnel Lead</td>
 						<td>Edinburgh</td>
 						<td>35</td>
-						<td data-order="1348614000">Wed 26th Sep 12</td>
+						<td data-order="1348617600">Wed 26th Sep 12</td>
 						<td data-order="217500">$217,500/y</td>
 					</tr>
 					<tr>
@@ -241,7 +223,7 @@ $(document).ready(function() {
 						<td>Development Lead</td>
 						<td>New York</td>
 						<td>30</td>
-						<td data-order="1315004400">Sat 3rd Sep 11</td>
+						<td data-order="1315008000">Sat 3rd Sep 11</td>
 						<td data-order="345000">$345,000/y</td>
 					</tr>
 					<tr>
@@ -249,7 +231,7 @@ $(document).ready(function() {
 						<td>Chief Marketing Officer (CMO)</td>
 						<td>New York</td>
 						<td>40</td>
-						<td data-order="1245884400">Thu 25th Jun 09</td>
+						<td data-order="1245888000">Thu 25th Jun 09</td>
 						<td data-order="675000">$675,000/y</td>
 					</tr>
 					<tr>
@@ -265,7 +247,7 @@ $(document).ready(function() {
 						<td>Sales Assistant</td>
 						<td>Sidney</td>
 						<td>23</td>
-						<td data-order="1284937200">Mon 20th Sep 10</td>
+						<td data-order="1284940800">Mon 20th Sep 10</td>
 						<td data-order="85600">$85,600/y</td>
 					</tr>
 					<tr>
@@ -273,7 +255,7 @@ $(document).ready(function() {
 						<td>Chief Executive Officer (CEO)</td>
 						<td>London</td>
 						<td>47</td>
-						<td data-order="1255042800">Fri 9th Oct 09</td>
+						<td data-order="1255046400">Fri 9th Oct 09</td>
 						<td data-order="1200000">$1,200,000/y</td>
 					</tr>
 					<tr>
@@ -297,7 +279,7 @@ $(document).ready(function() {
 						<td>Software Engineer</td>
 						<td>San Francisco</td>
 						<td>28</td>
-						<td data-order="1307401200">Tue 7th Jun 11</td>
+						<td data-order="1307404800">Tue 7th Jun 11</td>
 						<td data-order="206850">$206,850/y</td>
 					</tr>
 					<tr>
@@ -313,7 +295,7 @@ $(document).ready(function() {
 						<td>Regional Marketing</td>
 						<td>Tokyo</td>
 						<td>20</td>
-						<td data-order="1313276400">Sun 14th Aug 11</td>
+						<td data-order="1313280000">Sun 14th Aug 11</td>
 						<td data-order="163000">$163,000/y</td>
 					</tr>
 					<tr>
@@ -321,7 +303,7 @@ $(document).ready(function() {
 						<td>Integration Specialist</td>
 						<td>Sidney</td>
 						<td>37</td>
-						<td data-order="1306969200">Thu 2nd Jun 11</td>
+						<td data-order="1306972800">Thu 2nd Jun 11</td>
 						<td data-order="95400">$95,400/y</td>
 					</tr>
 					<tr>
@@ -329,7 +311,7 @@ $(document).ready(function() {
 						<td>Developer</td>
 						<td>London</td>
 						<td>53</td>
-						<td data-order="1256166000">Thu 22nd Oct 09</td>
+						<td data-order="1256169600">Thu 22nd Oct 09</td>
 						<td data-order="114500">$114,500/y</td>
 					</tr>
 					<tr>
@@ -337,7 +319,7 @@ $(document).ready(function() {
 						<td>Technical Author</td>
 						<td>London</td>
 						<td>27</td>
-						<td data-order="1304722800">Sat 7th May 11</td>
+						<td data-order="1304726400">Sat 7th May 11</td>
 						<td data-order="145000">$145,000/y</td>
 					</tr>
 					<tr>
@@ -345,7 +327,7 @@ $(document).ready(function() {
 						<td>Team Leader</td>
 						<td>San Francisco</td>
 						<td>22</td>
-						<td data-order="1224975600">Sun 26th Oct 08</td>
+						<td data-order="1224979200">Sun 26th Oct 08</td>
 						<td data-order="235500">$235,500/y</td>
 					</tr>
 					<tr>
@@ -401,7 +383,7 @@ $(document).ready(function() {
 						<td>Director</td>
 						<td>New York</td>
 						<td>65</td>
-						<td data-order="1222383600">Fri 26th Sep 08</td>
+						<td data-order="1222387200">Fri 26th Sep 08</td>
 						<td data-order="645750">$645,750/y</td>
 					</tr>
 					<tr>
@@ -417,7 +399,7 @@ $(document).ready(function() {
 						<td>Software Engineer</td>
 						<td>London</td>
 						<td>38</td>
-						<td data-order="1304377200">Tue 3rd May 11</td>
+						<td data-order="1304380800">Tue 3rd May 11</td>
 						<td data-order="163500">$163,500/y</td>
 					</tr>
 					<tr>
@@ -425,7 +407,7 @@ $(document).ready(function() {
 						<td>Support Engineer</td>
 						<td>Tokyo</td>
 						<td>37</td>
-						<td data-order="1250636400">Wed 19th Aug 09</td>
+						<td data-order="1250640000">Wed 19th Aug 09</td>
 						<td data-order="139575">$139,575/y</td>
 					</tr>
 					<tr>
@@ -433,7 +415,7 @@ $(document).ready(function() {
 						<td>Developer</td>
 						<td>New York</td>
 						<td>61</td>
-						<td data-order="1376175600">Sun 11th Aug 13</td>
+						<td data-order="1376179200">Sun 11th Aug 13</td>
 						<td data-order="98540">$98,540/y</td>
 					</tr>
 					<tr>
@@ -441,7 +423,7 @@ $(document).ready(function() {
 						<td>Support Engineer</td>
 						<td>San Francisco</td>
 						<td>47</td>
-						<td data-order="1246921200">Tue 7th Jul 09</td>
+						<td data-order="1246924800">Tue 7th Jul 09</td>
 						<td data-order="87500">$87,500/y</td>
 					</tr>
 					<tr>
@@ -449,7 +431,7 @@ $(document).ready(function() {
 						<td>Data Coordinator</td>
 						<td>Singapore</td>
 						<td>64</td>
-						<td data-order="1333926000">Mon 9th Apr 12</td>
+						<td data-order="1333929600">Mon 9th Apr 12</td>
 						<td data-order="138575">$138,575/y</td>
 					</tr>
 					<tr>
@@ -465,7 +447,7 @@ $(document).ready(function() {
 						<td>Software Engineer</td>
 						<td>San Francisco</td>
 						<td>56</td>
-						<td data-order="1338505200">Fri 1st Jun 12</td>
+						<td data-order="1338508800">Fri 1st Jun 12</td>
 						<td data-order="115000">$115,000/y</td>
 					</tr>
 					<tr>
@@ -505,7 +487,7 @@ $(document).ready(function() {
 						<td>Developer</td>
 						<td>San Francisco</td>
 						<td>30</td>
-						<td data-order="1279062000">Wed 14th Jul 10</td>
+						<td data-order="1279065600">Wed 14th Jul 10</td>
 						<td data-order="86500">$86,500/y</td>
 					</tr>
 					<tr>
@@ -521,7 +503,7 @@ $(document).ready(function() {
 						<td>Javascript Developer</td>
 						<td>Singapore</td>
 						<td>29</td>
-						<td data-order="1309129200">Mon 27th Jun 11</td>
+						<td data-order="1309132800">Mon 27th Jun 11</td>
 						<td data-order="183000">$183,000/y</td>
 					</tr>
 					<tr>
@@ -533,8 +515,17 @@ $(document).ready(function() {
 						<td data-order="112000">$112,000/y</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -542,43 +533,40 @@ $(document).ready(function() {
 				<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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -587,155 +575,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
-							<li class="active"><a href="./html5-data-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>
+							<li>
+								<a href="./events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="./dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="./column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li class="active">
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/html5-data-options.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable();
@@ -26,31 +25,26 @@ $(document).ready(function() {
 
 	</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 require 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> example below).</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>
@@ -62,7 +56,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -73,7 +66,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</tfoot>
-
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -533,7 +525,6 @@ $(document).ready(function() {
 					</tr>
 				</tbody>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -541,43 +532,40 @@ $(document).ready(function() {
 				<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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -586,155 +574,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="./html5-data-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>
+							<li>
+								<a href="./events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="./dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="./column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li class="active">
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

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="initial-scale=1.0, maximum-scale=2.0">
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
-
 	<title>DataTables examples - Advanced initialisation</title>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Advanced initialisation</span></h1>
-
 			<div class="info">
 				<p>The configuration options offered by DataTables extend much further than the options shown in the basic initialisation of this documentation. Through
 				combinations of the options available and the use of callbacks, DataTables is completely customisable and will fit into exactly what you need for your table
 				display.</p>
-
 				<p>This section shows some more advanced initialisation options. Keep in mind also that each example can be combined with the other examples to get what you
 				want!</p>
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="./html5-data-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>
+							<li>
+								<a href="./events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="./dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="./column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
 				</div>
-
 				<div class="epilogue">
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/language_file.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Language file</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -30,22 +29,19 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Language file</span></h1>
-
 			<div class="info">
 				<p>As well as being able to pass language information to DataTables through the <a href="//datatables.net/reference/option/language"><code class="option" title=
 				"DataTables initialisation option">language</code></a> initialisation option, you can also store the language information in a file, which DataTables can load by
 				Ajax using the <a href="//datatables.net/reference/option/language.url"><code class="option" title="DataTables initialisation option">language.url</code></a>
 				option.</p>
-
 				<p>The following example shows DataTables reading a German language file which is hosted on the <a href="http://cdn.datatables.net">DataTables CDN</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>
@@ -56,18 +52,6 @@ $(document).ready(function() {
 						<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>
@@ -526,8 +510,17 @@ $(document).ready(function() {
 						<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>
@@ -535,7 +528,6 @@ $(document).ready(function() {
 				<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() {
@@ -545,37 +537,35 @@ $(document).ready(function() {
 		}
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -584,155 +574,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
-							<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
-							<li class="active"><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-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li class="active">
+								<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</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/length_menu.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Page length 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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -28,28 +27,23 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Page length options</span></h1>
-
 			<div class="info">
 				<p>It is possible to easily customise the options shown in the length menu (by default at the top left of the table) using the <a href=
 				"//datatables.net/reference/option/lengthMenu"><code class="option" title="DataTables initialisation option">lengthMenu</code></a> initialisation option.</p>
-
 				<p>This parameter can take one of two forms:</p>
-
 				<ul class="markdown">
 					<li>A 1D array of options which will be used for both the displayed option and the value, or</li>
 					<li>A 2D array in which the first array is used to define the value options and the second array the displayed options (useful for language strings such as
 					'All').</li>
 				</ul>
-
 				<p>The example below shows a 2D array being used to include a "Show all" records 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>
@@ -60,18 +54,6 @@ $(document).ready(function() {
 						<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>
@@ -530,8 +512,17 @@ $(document).ready(function() {
 						<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>
@@ -539,7 +530,6 @@ $(document).ready(function() {
 				<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() {
@@ -547,37 +537,35 @@ $(document).ready(function() {
 		&quot;lengthMenu&quot;: [[10, 25, 50, -1], [10, 25, 50, &quot;All&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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -586,155 +574,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li class="active"><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>
+							<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 class="active">
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div 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</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/object_dom_read.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable({
@@ -35,27 +34,21 @@ $(document).ready(function() {
 
 	</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">{
+				<pre><code class="multiline language-js">{
 	"name": "...",
 	"position": "...",
 	"office": "...",
@@ -63,13 +56,11 @@ $(document).ready(function() {
 	"start_date": "...",
 	"salary": "..."
 }
-</code>
-</pre>
-
+</code></pre>
 				<p>Please note that this feature requires DataTables 1.10.3 or newer.</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>
@@ -80,18 +71,6 @@ $(document).ready(function() {
 						<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>
@@ -550,8 +529,17 @@ $(document).ready(function() {
 						<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>
@@ -559,7 +547,6 @@ $(document).ready(function() {
 				<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() {
@@ -574,37 +561,35 @@ $(document).ready(function() {
 		]
 	});
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -613,155 +598,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
-							<li class="active"><a href="./object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="./html5-data-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>
+							<li>
+								<a href="./events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="./dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="./column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li class="active">
+								<a href="./object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/row_callback.html

@@ -3,26 +3,25 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Row created callback</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.highlight {
 		font-weight: bold;
 		color: blue;
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -37,23 +36,20 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Row created callback</span></h1>
-
 			<div class="info">
 				<p>The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the
 				<a href="//datatables.net/reference/option/createdRow"><code class="option" title="DataTables initialisation option">createdRow</code></a> function is called once
 				and once only. It is passed the create row node which can then be modified.</p>
-
-				<p>In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to the container cell if the salary is greater than $4,000.
+				<p>In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to the container cell if the salary is greater than $150,000.
 				Note that <a href="//datatables.net/reference/option/columns.createdCell"><code class="option" title=
 				"DataTables initialisation option">columns.createdCell</code></a> could also be used to create exactly the same effect.</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>
@@ -64,18 +60,6 @@ $(document).ready(function() {
 						<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>
@@ -534,8 +518,17 @@ $(document).ready(function() {
 						<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>
@@ -543,7 +536,6 @@ $(document).ready(function() {
 				<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() {
@@ -555,19 +547,19 @@ $(document).ready(function() {
 		}
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
@@ -576,19 +568,17 @@ $(document).ready(function() {
 		color: blue;
 	}</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="../../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
@@ -597,155 +587,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="./html5-data-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 class="active"><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-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li class="active">
+								<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</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/row_grouping.html

@@ -3,40 +3,40 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Row grouping</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">
-
+	
 tr.group,
 tr.group:hover {
 	background-color: #ddd !important;
 }
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
+	var groupColumn = 2;
 	var table = $('#example').DataTable({
 		"columnDefs": [
-			{ "visible": false, "targets": 2 }
+			{ "visible": false, "targets": groupColumn }
 		],
-		"order": [[ 2, 'asc' ]],
+		"order": [[ groupColumn, 'asc' ]],
 		"displayLength": 25,
 		"drawCallback": function ( settings ) {
 			var api = this.api();
 			var rows = api.rows( {page:'current'} ).nodes();
 			var last=null;
 
-			api.column(2, {page:'current'} ).data().each( function ( group, i ) {
+			api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
 				if ( last !== group ) {
 					$(rows).eq( i ).before(
 						'<tr class="group"><td colspan="5">'+group+'</td></tr>'
@@ -51,11 +51,11 @@ $(document).ready(function() {
 	// Order by the grouping
 	$('#example tbody').on( 'click', 'tr.group', function () {
 		var currentOrder = table.order()[0];
-		if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
-			table.order( [ 2, 'desc' ] ).draw();
+		if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
+			table.order( [ groupColumn, 'desc' ] ).draw();
 		}
 		else {
-			table.order( [ 2, 'asc' ] ).draw();
+			table.order( [ groupColumn, 'asc' ] ).draw();
 		}
 	} );
 } );
@@ -63,23 +63,25 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Row grouping</span></h1>
-
 			<div class="info">
 				<p>Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the DataTables core), it is most certainly
 				possible to give the look and feel of row grouping.</p>
-
 				<p>In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden). The grouping indicator
 				is added by the <a href="//datatables.net/reference/option/drawCallback"><code class="option" title="DataTables initialisation option">drawCallback</code></a>
 				function, which will parse through the rows which are displayed, and enter a grouping TR element where a new group is found. A <code>click</code> event handler is
 				added for the grouping rows to allow the grouping order to be restored as well as ordering by any other column.</p>
+				<h3 data-anchor="RowGroup-extension"><a name="RowGroup-extension" id="RowGroup-extension"></a>RowGroup extension</h3>
+				<p>Important note: DataTables now has a <a href="https://datatables.net/extensions/rowgroup">RowGroup</a> extension that provides a formal API for the abilities in
+				this demo and extends upon them in a number of significant and useful ways. This example is retained as a useful demonstration of how the <a href=
+				"//datatables.net/reference/option/drawCallback"><code class="option" title="DataTables initialisation option">drawCallback</code></a> option can be used, but for
+				new sites that make use of row grouping, it is suggested that you use the new RowGroup extension.</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>
@@ -90,18 +92,6 @@ $(document).ready(function() {
 						<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>
@@ -560,8 +550,17 @@ $(document).ready(function() {
 						<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>
@@ -569,22 +568,22 @@ $(document).ready(function() {
 				<li>Ajax</li>
 				<li>Server-side script</li>
 			</ul>
-
 			<div class="tabs">
 				<div class="js">
 					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
+	var groupColumn = 2;
 	var table = $('#example').DataTable({
 		&quot;columnDefs&quot;: [
-			{ &quot;visible&quot;: false, &quot;targets&quot;: 2 }
+			{ &quot;visible&quot;: false, &quot;targets&quot;: groupColumn }
 		],
-		&quot;order&quot;: [[ 2, 'asc' ]],
+		&quot;order&quot;: [[ groupColumn, 'asc' ]],
 		&quot;displayLength&quot;: 25,
 		&quot;drawCallback&quot;: function ( settings ) {
 			var api = this.api();
 			var rows = api.rows( {page:'current'} ).nodes();
 			var last=null;
 
-			api.column(2, {page:'current'} ).data().each( function ( group, i ) {
+			api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
 				if ( last !== group ) {
 					$(rows).eq( i ).before(
 						'&lt;tr class=&quot;group&quot;&gt;&lt;td colspan=&quot;5&quot;&gt;'+group+'&lt;/td&gt;&lt;/tr&gt;'
@@ -599,27 +598,27 @@ $(document).ready(function() {
 	// Order by the grouping
 	$('#example tbody').on( 'click', 'tr.group', function () {
 		var currentOrder = table.order()[0];
-		if ( currentOrder[0] === 2 &amp;&amp; currentOrder[1] === 'asc' ) {
-			table.order( [ 2, 'desc' ] ).draw();
+		if ( currentOrder[0] === groupColumn &amp;&amp; currentOrder[1] === 'asc' ) {
+			table.order( [ groupColumn, 'desc' ] ).draw();
 		}
 		else {
-			table.order( [ 2, 'asc' ] ).draw();
+			table.order( [ groupColumn, 'asc' ] ).draw();
 		}
 	} );
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
@@ -628,19 +627,17 @@ tr.group:hover {
 	background-color: #ddd !important;
 }</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="../../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
@@ -649,155 +646,325 @@ tr.group:hover {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="./html5-data-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 class="active"><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-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li class="active">
+								<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</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/sort_direction_control.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Order direction sequence control</title>
 	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
 	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
 	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
 	<style type="text/css" class="init">
-
+	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -35,20 +34,16 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Order direction sequence control</span></h1>
-
 			<div class="info">
 				<p>At times you may wish to change the default ordering direction sequence for columns (some or all of them) to be 'descending' rather than DataTables' default
 				ascending. This can be done through the use of the <a href="//datatables.net/reference/option/columns.orderSequence"><code class="option" title=
 				"DataTables initialisation option">columns.orderSequence</code></a> initialisation parameter. This parameter also allows you to limit the ordering to a single
 				direction, or you could add complex behaviour to the ordering interaction.</p>
-
 				<p>The example below shows:</p>
-
 				<ul class="markdown">
 					<li>Column 1 - default ordering</li>
 					<li>Column 2 - default ordering</li>
@@ -57,12 +52,11 @@ $(document).ready(function() {
 					<li>Column 5 - descending ordering only</li>
 					<li>Column 6 - default ordering</li>
 				</ul>
-
 				<p>It's worth noting that I don't have a good use case for when you might what to mix such complex ordering behaviour into a single table, but the example shows
-				how these options can be use and therefore applied across all columns.</p>
+				how these options can be used and therefore applied across all columns.</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>
@@ -73,18 +67,6 @@ $(document).ready(function() {
 						<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>
@@ -543,8 +525,17 @@ $(document).ready(function() {
 						<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>
@@ -552,7 +543,6 @@ $(document).ready(function() {
 				<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() {
@@ -567,37 +557,35 @@ $(document).ready(function() {
 		]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -606,155 +594,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Advanced initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./dt_events.html">DataTables events</a></li>
-							<li><a href="./column_render.html">Column rendering</a></li>
-							<li><a href="./length_menu.html">Page length options</a></li>
-							<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="./html5-data-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 class="active"><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-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li class="active">
+								<a href="./sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/custom_data_flat.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"ajax": {
@@ -37,33 +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>
-
 			<div class="info">
 				<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
 				<code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href=
 				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
-
 				<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
 				of ways in which it can be used:</p>
-
 				<ul class="markdown">
 					<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
 					<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an array.</li>
 					<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to transform the data from one source format to another (for example
 					you could convert from XML to a Javascript object). The value returned from the function is used as the data for the table.</li>
 				</ul>
-
 				<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
 				"DataTables initialisation option">ajax.dataSrc</code></a> being used as an empty string. This tells DataTables that the JSON loaded is a plain array, not an
 				object with an array inside it as is the default.</p>
 			</div>
-
-			<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>
@@ -74,7 +68,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -86,7 +79,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -94,7 +86,6 @@ $(document).ready(function() {
 				<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() {
@@ -113,37 +104,35 @@ $(document).ready(function() {
 		]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -152,155 +141,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Ajax</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="./objects.html">Ajax data source (objects)</a></li>
-							<li><a href="./deep.html">Nested object data (objects)</a></li>
-							<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="./null_data_source.html">Generated content for a column</a></li>
-							<li><a href="./custom_data_property.html">Custom data source property</a></li>
-							<li class="active"><a href="./custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li class="active">
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../server_side/index.html">Server-side</a></h3>
 						<ul class="toc">
-							<li><a href="../server_side/simple.html">Server-side processing</a></li>
-							<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="../server_side/post.html">POST data</a></li>
-							<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="../server_side/object_data.html">Object data source</a></li>
-							<li><a href="../server_side/row_details.html">Row details</a></li>
-							<li><a href="../server_side/select_rows.html">Row selection</a></li>
-							<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/custom_data_property.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"ajax": {
@@ -29,35 +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>
-
 			<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=
+				<code>{ "data": [...] }</code>). This can easily be changed by using the <code>dataSrc</code> option of the <a href=
 				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
-
 				<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
 				of ways in which it can be used:</p>
-
 				<ul class="markdown">
 					<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
 					<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an array.</li>
 					<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to transform the data from one source format to another (for example
 					you could convert from XML to a Javascript object). The value returned from the function is used as the data for the table.</li>
 				</ul>
-
 				<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
 				"DataTables initialisation option">ajax.dataSrc</code></a> being used as a string to get the data from a different source property, in this case <code class=
-				"string" title="String">demo</code> but it could be any value, included a nested property by using standard dotted Javascript object notation.</p>
-
+				"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>
@@ -68,7 +61,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -80,7 +72,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -88,7 +79,6 @@ $(document).ready(function() {
 				<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() {
@@ -99,37 +89,35 @@ $(document).ready(function() {
 		}
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -138,155 +126,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Ajax</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="./objects.html">Ajax data source (objects)</a></li>
-							<li><a href="./deep.html">Nested object data (objects)</a></li>
-							<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="./null_data_source.html">Generated content for a column</a></li>
-							<li class="active"><a href="./custom_data_property.html">Custom data source property</a></li>
-							<li><a href="./custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li class="active">
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../server_side/index.html">Server-side</a></h3>
 						<ul class="toc">
-							<li><a href="../server_side/simple.html">Server-side processing</a></li>
-							<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="../server_side/post.html">POST data</a></li>
-							<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="../server_side/object_data.html">Object data source</a></li>
-							<li><a href="../server_side/row_details.html">Row details</a></li>
-							<li><a href="../server_side/select_rows.html">Row selection</a></li>
-							<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/data/objects.txt

@@ -1,6 +1,7 @@
 {
     "data": [
         {
+            "id": "1",
             "name": "Tiger Nixon",
             "position": "System Architect",
             "salary": "$320,800",
@@ -9,6 +10,7 @@
             "extn": "5421"
         },
         {
+            "id": "2",
             "name": "Garrett Winters",
             "position": "Accountant",
             "salary": "$170,750",
@@ -17,6 +19,7 @@
             "extn": "8422"
         },
         {
+            "id": "3",
             "name": "Ashton Cox",
             "position": "Junior Technical Author",
             "salary": "$86,000",
@@ -25,6 +28,7 @@
             "extn": "1562"
         },
         {
+            "id": "4",
             "name": "Cedric Kelly",
             "position": "Senior Javascript Developer",
             "salary": "$433,060",
@@ -33,6 +37,7 @@
             "extn": "6224"
         },
         {
+            "id": "5",
             "name": "Airi Satou",
             "position": "Accountant",
             "salary": "$162,700",
@@ -41,6 +46,7 @@
             "extn": "5407"
         },
         {
+            "id": "6",
             "name": "Brielle Williamson",
             "position": "Integration Specialist",
             "salary": "$372,000",
@@ -49,6 +55,7 @@
             "extn": "4804"
         },
         {
+            "id": "7",
             "name": "Herrod Chandler",
             "position": "Sales Assistant",
             "salary": "$137,500",
@@ -57,6 +64,7 @@
             "extn": "9608"
         },
         {
+            "id": "8",
             "name": "Rhona Davidson",
             "position": "Integration Specialist",
             "salary": "$327,900",
@@ -65,6 +73,7 @@
             "extn": "6200"
         },
         {
+            "id": "9",
             "name": "Colleen Hurst",
             "position": "Javascript Developer",
             "salary": "$205,500",
@@ -73,6 +82,7 @@
             "extn": "2360"
         },
         {
+            "id": "10",
             "name": "Sonya Frost",
             "position": "Software Engineer",
             "salary": "$103,600",
@@ -81,6 +91,7 @@
             "extn": "1667"
         },
         {
+            "id": "11",
             "name": "Jena Gaines",
             "position": "Office Manager",
             "salary": "$90,560",
@@ -89,6 +100,7 @@
             "extn": "3814"
         },
         {
+            "id": "12",
             "name": "Quinn Flynn",
             "position": "Support Lead",
             "salary": "$342,000",
@@ -97,6 +109,7 @@
             "extn": "9497"
         },
         {
+            "id": "13",
             "name": "Charde Marshall",
             "position": "Regional Director",
             "salary": "$470,600",
@@ -105,6 +118,7 @@
             "extn": "6741"
         },
         {
+            "id": "14",
             "name": "Haley Kennedy",
             "position": "Senior Marketing Designer",
             "salary": "$313,500",
@@ -113,6 +127,7 @@
             "extn": "3597"
         },
         {
+            "id": "15",
             "name": "Tatyana Fitzpatrick",
             "position": "Regional Director",
             "salary": "$385,750",
@@ -121,6 +136,7 @@
             "extn": "1965"
         },
         {
+            "id": "16",
             "name": "Michael Silva",
             "position": "Marketing Designer",
             "salary": "$198,500",
@@ -129,6 +145,7 @@
             "extn": "1581"
         },
         {
+            "id": "17",
             "name": "Paul Byrd",
             "position": "Chief Financial Officer (CFO)",
             "salary": "$725,000",
@@ -137,6 +154,7 @@
             "extn": "3059"
         },
         {
+            "id": "18",
             "name": "Gloria Little",
             "position": "Systems Administrator",
             "salary": "$237,500",
@@ -145,6 +163,7 @@
             "extn": "1721"
         },
         {
+            "id": "19",
             "name": "Bradley Greer",
             "position": "Software Engineer",
             "salary": "$132,000",
@@ -153,6 +172,7 @@
             "extn": "2558"
         },
         {
+            "id": "20",
             "name": "Dai Rios",
             "position": "Personnel Lead",
             "salary": "$217,500",
@@ -161,6 +181,7 @@
             "extn": "2290"
         },
         {
+            "id": "21",
             "name": "Jenette Caldwell",
             "position": "Development Lead",
             "salary": "$345,000",
@@ -169,6 +190,7 @@
             "extn": "1937"
         },
         {
+            "id": "22",
             "name": "Yuri Berry",
             "position": "Chief Marketing Officer (CMO)",
             "salary": "$675,000",
@@ -177,6 +199,7 @@
             "extn": "6154"
         },
         {
+            "id": "23",
             "name": "Caesar Vance",
             "position": "Pre-Sales Support",
             "salary": "$106,450",
@@ -185,6 +208,7 @@
             "extn": "8330"
         },
         {
+            "id": "24",
             "name": "Doris Wilder",
             "position": "Sales Assistant",
             "salary": "$85,600",
@@ -193,6 +217,7 @@
             "extn": "3023"
         },
         {
+            "id": "25",
             "name": "Angelica Ramos",
             "position": "Chief Executive Officer (CEO)",
             "salary": "$1,200,000",
@@ -201,6 +226,7 @@
             "extn": "5797"
         },
         {
+            "id": "26",
             "name": "Gavin Joyce",
             "position": "Developer",
             "salary": "$92,575",
@@ -209,6 +235,7 @@
             "extn": "8822"
         },
         {
+            "id": "27",
             "name": "Jennifer Chang",
             "position": "Regional Director",
             "salary": "$357,650",
@@ -217,6 +244,7 @@
             "extn": "9239"
         },
         {
+            "id": "28",
             "name": "Brenden Wagner",
             "position": "Software Engineer",
             "salary": "$206,850",
@@ -225,6 +253,7 @@
             "extn": "1314"
         },
         {
+            "id": "29",
             "name": "Fiona Green",
             "position": "Chief Operating Officer (COO)",
             "salary": "$850,000",
@@ -233,6 +262,7 @@
             "extn": "2947"
         },
         {
+            "id": "30",
             "name": "Shou Itou",
             "position": "Regional Marketing",
             "salary": "$163,000",
@@ -241,6 +271,7 @@
             "extn": "8899"
         },
         {
+            "id": "31",
             "name": "Michelle House",
             "position": "Integration Specialist",
             "salary": "$95,400",
@@ -249,6 +280,7 @@
             "extn": "2769"
         },
         {
+            "id": "32",
             "name": "Suki Burks",
             "position": "Developer",
             "salary": "$114,500",
@@ -257,6 +289,7 @@
             "extn": "6832"
         },
         {
+            "id": "33",
             "name": "Prescott Bartlett",
             "position": "Technical Author",
             "salary": "$145,000",
@@ -265,6 +298,7 @@
             "extn": "3606"
         },
         {
+            "id": "34",
             "name": "Gavin Cortez",
             "position": "Team Leader",
             "salary": "$235,500",
@@ -273,6 +307,7 @@
             "extn": "2860"
         },
         {
+            "id": "35",
             "name": "Martena Mccray",
             "position": "Post-Sales support",
             "salary": "$324,050",
@@ -281,6 +316,7 @@
             "extn": "8240"
         },
         {
+            "id": "36",
             "name": "Unity Butler",
             "position": "Marketing Designer",
             "salary": "$85,675",
@@ -289,6 +325,7 @@
             "extn": "5384"
         },
         {
+            "id": "37",
             "name": "Howard Hatfield",
             "position": "Office Manager",
             "salary": "$164,500",
@@ -297,6 +334,7 @@
             "extn": "7031"
         },
         {
+            "id": "38",
             "name": "Hope Fuentes",
             "position": "Secretary",
             "salary": "$109,850",
@@ -305,6 +343,7 @@
             "extn": "6318"
         },
         {
+            "id": "39",
             "name": "Vivian Harrell",
             "position": "Financial Controller",
             "salary": "$452,500",
@@ -313,6 +352,7 @@
             "extn": "9422"
         },
         {
+            "id": "40",
             "name": "Timothy Mooney",
             "position": "Office Manager",
             "salary": "$136,200",
@@ -321,6 +361,7 @@
             "extn": "7580"
         },
         {
+            "id": "41",
             "name": "Jackson Bradshaw",
             "position": "Director",
             "salary": "$645,750",
@@ -329,6 +370,7 @@
             "extn": "1042"
         },
         {
+            "id": "42",
             "name": "Olivia Liang",
             "position": "Support Engineer",
             "salary": "$234,500",
@@ -337,6 +379,7 @@
             "extn": "2120"
         },
         {
+            "id": "43",
             "name": "Bruno Nash",
             "position": "Software Engineer",
             "salary": "$163,500",
@@ -345,6 +388,7 @@
             "extn": "6222"
         },
         {
+            "id": "44",
             "name": "Sakura Yamamoto",
             "position": "Support Engineer",
             "salary": "$139,575",
@@ -353,6 +397,7 @@
             "extn": "9383"
         },
         {
+            "id": "45",
             "name": "Thor Walton",
             "position": "Developer",
             "salary": "$98,540",
@@ -361,6 +406,7 @@
             "extn": "8327"
         },
         {
+            "id": "46",
             "name": "Finn Camacho",
             "position": "Support Engineer",
             "salary": "$87,500",
@@ -369,6 +415,7 @@
             "extn": "2927"
         },
         {
+            "id": "47",
             "name": "Serge Baldwin",
             "position": "Data Coordinator",
             "salary": "$138,575",
@@ -377,6 +424,7 @@
             "extn": "8352"
         },
         {
+            "id": "48",
             "name": "Zenaida Frank",
             "position": "Software Engineer",
             "salary": "$125,250",
@@ -385,6 +433,7 @@
             "extn": "7439"
         },
         {
+            "id": "49",
             "name": "Zorita Serrano",
             "position": "Software Engineer",
             "salary": "$115,000",
@@ -393,6 +442,7 @@
             "extn": "4389"
         },
         {
+            "id": "50",
             "name": "Jennifer Acosta",
             "position": "Junior Javascript Developer",
             "salary": "$75,650",
@@ -401,6 +451,7 @@
             "extn": "3431"
         },
         {
+            "id": "51",
             "name": "Cara Stevens",
             "position": "Sales Assistant",
             "salary": "$145,600",
@@ -409,6 +460,7 @@
             "extn": "3990"
         },
         {
+            "id": "52",
             "name": "Hermione Butler",
             "position": "Regional Director",
             "salary": "$356,250",
@@ -417,6 +469,7 @@
             "extn": "1016"
         },
         {
+            "id": "53",
             "name": "Lael Greer",
             "position": "Systems Administrator",
             "salary": "$103,500",
@@ -425,6 +478,7 @@
             "extn": "6733"
         },
         {
+            "id": "54",
             "name": "Jonas Alexander",
             "position": "Developer",
             "salary": "$86,500",
@@ -433,6 +487,7 @@
             "extn": "8196"
         },
         {
+            "id": "55",
             "name": "Shad Decker",
             "position": "Regional Director",
             "salary": "$183,000",
@@ -441,6 +496,7 @@
             "extn": "6373"
         },
         {
+            "id": "56",
             "name": "Michael Bruce",
             "position": "Javascript Developer",
             "salary": "$183,000",
@@ -449,6 +505,7 @@
             "extn": "5384"
         },
         {
+            "id": "57",
             "name": "Donna Snider",
             "position": "Customer Support",
             "salary": "$112,000",

examples/ajax/data/objects_root_array.txt

@@ -1,5 +1,6 @@
 [
     {
+        "id": "1",
         "name": "Tiger Nixon",
         "position": "System Architect",
         "salary": "$320,800",
@@ -8,6 +9,7 @@
         "extn": "5421"
     },
     {
+        "id": "2",
         "name": "Garrett Winters",
         "position": "Accountant",
         "salary": "$170,750",
@@ -16,6 +18,7 @@
         "extn": "8422"
     },
     {
+        "id": "3",
         "name": "Ashton Cox",
         "position": "Junior Technical Author",
         "salary": "$86,000",
@@ -24,6 +27,7 @@
         "extn": "1562"
     },
     {
+        "id": "4",
         "name": "Cedric Kelly",
         "position": "Senior Javascript Developer",
         "salary": "$433,060",
@@ -32,6 +36,7 @@
         "extn": "6224"
     },
     {
+        "id": "5",
         "name": "Airi Satou",
         "position": "Accountant",
         "salary": "$162,700",
@@ -40,6 +45,7 @@
         "extn": "5407"
     },
     {
+        "id": "6",
         "name": "Brielle Williamson",
         "position": "Integration Specialist",
         "salary": "$372,000",
@@ -48,6 +54,7 @@
         "extn": "4804"
     },
     {
+        "id": "7",
         "name": "Herrod Chandler",
         "position": "Sales Assistant",
         "salary": "$137,500",
@@ -56,6 +63,7 @@
         "extn": "9608"
     },
     {
+        "id": "8",
         "name": "Rhona Davidson",
         "position": "Integration Specialist",
         "salary": "$327,900",
@@ -64,6 +72,7 @@
         "extn": "6200"
     },
     {
+        "id": "9",
         "name": "Colleen Hurst",
         "position": "Javascript Developer",
         "salary": "$205,500",
@@ -72,6 +81,7 @@
         "extn": "2360"
     },
     {
+        "id": "10",
         "name": "Sonya Frost",
         "position": "Software Engineer",
         "salary": "$103,600",
@@ -80,6 +90,7 @@
         "extn": "1667"
     },
     {
+        "id": "11",
         "name": "Jena Gaines",
         "position": "Office Manager",
         "salary": "$90,560",
@@ -88,6 +99,7 @@
         "extn": "3814"
     },
     {
+        "id": "12",
         "name": "Quinn Flynn",
         "position": "Support Lead",
         "salary": "$342,000",
@@ -96,6 +108,7 @@
         "extn": "9497"
     },
     {
+        "id": "13",
         "name": "Charde Marshall",
         "position": "Regional Director",
         "salary": "$470,600",
@@ -104,6 +117,7 @@
         "extn": "6741"
     },
     {
+        "id": "14",
         "name": "Haley Kennedy",
         "position": "Senior Marketing Designer",
         "salary": "$313,500",
@@ -112,6 +126,7 @@
         "extn": "3597"
     },
     {
+        "id": "15",
         "name": "Tatyana Fitzpatrick",
         "position": "Regional Director",
         "salary": "$385,750",
@@ -120,6 +135,7 @@
         "extn": "1965"
     },
     {
+        "id": "16",
         "name": "Michael Silva",
         "position": "Marketing Designer",
         "salary": "$198,500",
@@ -128,6 +144,7 @@
         "extn": "1581"
     },
     {
+        "id": "17",
         "name": "Paul Byrd",
         "position": "Chief Financial Officer (CFO)",
         "salary": "$725,000",
@@ -136,6 +153,7 @@
         "extn": "3059"
     },
     {
+        "id": "18",
         "name": "Gloria Little",
         "position": "Systems Administrator",
         "salary": "$237,500",
@@ -144,6 +162,7 @@
         "extn": "1721"
     },
     {
+        "id": "19",
         "name": "Bradley Greer",
         "position": "Software Engineer",
         "salary": "$132,000",
@@ -152,6 +171,7 @@
         "extn": "2558"
     },
     {
+        "id": "20",
         "name": "Dai Rios",
         "position": "Personnel Lead",
         "salary": "$217,500",
@@ -160,6 +180,7 @@
         "extn": "2290"
     },
     {
+        "id": "21",
         "name": "Jenette Caldwell",
         "position": "Development Lead",
         "salary": "$345,000",
@@ -168,6 +189,7 @@
         "extn": "1937"
     },
     {
+        "id": "22",
         "name": "Yuri Berry",
         "position": "Chief Marketing Officer (CMO)",
         "salary": "$675,000",
@@ -176,6 +198,7 @@
         "extn": "6154"
     },
     {
+        "id": "23",
         "name": "Caesar Vance",
         "position": "Pre-Sales Support",
         "salary": "$106,450",
@@ -184,6 +207,7 @@
         "extn": "8330"
     },
     {
+        "id": "24",
         "name": "Doris Wilder",
         "position": "Sales Assistant",
         "salary": "$85,600",
@@ -192,6 +216,7 @@
         "extn": "3023"
     },
     {
+        "id": "25",
         "name": "Angelica Ramos",
         "position": "Chief Executive Officer (CEO)",
         "salary": "$1,200,000",
@@ -200,6 +225,7 @@
         "extn": "5797"
     },
     {
+        "id": "26",
         "name": "Gavin Joyce",
         "position": "Developer",
         "salary": "$92,575",
@@ -208,6 +234,7 @@
         "extn": "8822"
     },
     {
+        "id": "27",
         "name": "Jennifer Chang",
         "position": "Regional Director",
         "salary": "$357,650",
@@ -216,6 +243,7 @@
         "extn": "9239"
     },
     {
+        "id": "28",
         "name": "Brenden Wagner",
         "position": "Software Engineer",
         "salary": "$206,850",
@@ -224,6 +252,7 @@
         "extn": "1314"
     },
     {
+        "id": "29",
         "name": "Fiona Green",
         "position": "Chief Operating Officer (COO)",
         "salary": "$850,000",
@@ -232,6 +261,7 @@
         "extn": "2947"
     },
     {
+        "id": "30",
         "name": "Shou Itou",
         "position": "Regional Marketing",
         "salary": "$163,000",
@@ -240,6 +270,7 @@
         "extn": "8899"
     },
     {
+        "id": "31",
         "name": "Michelle House",
         "position": "Integration Specialist",
         "salary": "$95,400",
@@ -248,6 +279,7 @@
         "extn": "2769"
     },
     {
+        "id": "32",
         "name": "Suki Burks",
         "position": "Developer",
         "salary": "$114,500",
@@ -256,6 +288,7 @@
         "extn": "6832"
     },
     {
+        "id": "33",
         "name": "Prescott Bartlett",
         "position": "Technical Author",
         "salary": "$145,000",
@@ -264,6 +297,7 @@
         "extn": "3606"
     },
     {
+        "id": "34",
         "name": "Gavin Cortez",
         "position": "Team Leader",
         "salary": "$235,500",
@@ -272,6 +306,7 @@
         "extn": "2860"
     },
     {
+        "id": "35",
         "name": "Martena Mccray",
         "position": "Post-Sales support",
         "salary": "$324,050",
@@ -280,6 +315,7 @@
         "extn": "8240"
     },
     {
+        "id": "36",
         "name": "Unity Butler",
         "position": "Marketing Designer",
         "salary": "$85,675",
@@ -288,6 +324,7 @@
         "extn": "5384"
     },
     {
+        "id": "37",
         "name": "Howard Hatfield",
         "position": "Office Manager",
         "salary": "$164,500",
@@ -296,6 +333,7 @@
         "extn": "7031"
     },
     {
+        "id": "38",
         "name": "Hope Fuentes",
         "position": "Secretary",
         "salary": "$109,850",
@@ -304,6 +342,7 @@
         "extn": "6318"
     },
     {
+        "id": "39",
         "name": "Vivian Harrell",
         "position": "Financial Controller",
         "salary": "$452,500",
@@ -312,6 +351,7 @@
         "extn": "9422"
     },
     {
+        "id": "40",
         "name": "Timothy Mooney",
         "position": "Office Manager",
         "salary": "$136,200",
@@ -320,6 +360,7 @@
         "extn": "7580"
     },
     {
+        "id": "41",
         "name": "Jackson Bradshaw",
         "position": "Director",
         "salary": "$645,750",
@@ -328,6 +369,7 @@
         "extn": "1042"
     },
     {
+        "id": "42",
         "name": "Olivia Liang",
         "position": "Support Engineer",
         "salary": "$234,500",
@@ -336,6 +378,7 @@
         "extn": "2120"
     },
     {
+        "id": "43",
         "name": "Bruno Nash",
         "position": "Software Engineer",
         "salary": "$163,500",
@@ -344,6 +387,7 @@
         "extn": "6222"
     },
     {
+        "id": "44",
         "name": "Sakura Yamamoto",
         "position": "Support Engineer",
         "salary": "$139,575",
@@ -352,6 +396,7 @@
         "extn": "9383"
     },
     {
+        "id": "45",
         "name": "Thor Walton",
         "position": "Developer",
         "salary": "$98,540",
@@ -360,6 +405,7 @@
         "extn": "8327"
     },
     {
+        "id": "46",
         "name": "Finn Camacho",
         "position": "Support Engineer",
         "salary": "$87,500",
@@ -368,6 +414,7 @@
         "extn": "2927"
     },
     {
+        "id": "47",
         "name": "Serge Baldwin",
         "position": "Data Coordinator",
         "salary": "$138,575",
@@ -376,6 +423,7 @@
         "extn": "8352"
     },
     {
+        "id": "48",
         "name": "Zenaida Frank",
         "position": "Software Engineer",
         "salary": "$125,250",
@@ -384,6 +432,7 @@
         "extn": "7439"
     },
     {
+        "id": "49",
         "name": "Zorita Serrano",
         "position": "Software Engineer",
         "salary": "$115,000",
@@ -392,6 +441,7 @@
         "extn": "4389"
     },
     {
+        "id": "50",
         "name": "Jennifer Acosta",
         "position": "Junior Javascript Developer",
         "salary": "$75,650",
@@ -400,6 +450,7 @@
         "extn": "3431"
     },
     {
+        "id": "51",
         "name": "Cara Stevens",
         "position": "Sales Assistant",
         "salary": "$145,600",
@@ -408,6 +459,7 @@
         "extn": "3990"
     },
     {
+        "id": "52",
         "name": "Hermione Butler",
         "position": "Regional Director",
         "salary": "$356,250",
@@ -416,6 +468,7 @@
         "extn": "1016"
     },
     {
+        "id": "53",
         "name": "Lael Greer",
         "position": "Systems Administrator",
         "salary": "$103,500",
@@ -424,6 +477,7 @@
         "extn": "6733"
     },
     {
+        "id": "54",
         "name": "Jonas Alexander",
         "position": "Developer",
         "salary": "$86,500",
@@ -432,6 +486,7 @@
         "extn": "8196"
     },
     {
+        "id": "55",
         "name": "Shad Decker",
         "position": "Regional Director",
         "salary": "$183,000",
@@ -440,6 +495,7 @@
         "extn": "6373"
     },
     {
+        "id": "56",
         "name": "Michael Bruce",
         "position": "Javascript Developer",
         "salary": "$183,000",
@@ -448,6 +504,7 @@
         "extn": "5384"
     },
     {
+        "id": "57",
         "name": "Donna Snider",
         "position": "Customer Support",
         "salary": "$112,000",

examples/ajax/data/orthogonal.txt

@@ -6,7 +6,7 @@
             "salary": "$320,800",
             "start_date": {
                 "display": "Mon 25th Apr 11",
-                "timestamp": "1303686000"
+                "timestamp": "1303689600"
             },
             "office": "Edinburgh",
             "extn": "5421"
@@ -17,7 +17,7 @@
             "salary": "$170,750",
             "start_date": {
                 "display": "Mon 25th Jul 11",
-                "timestamp": "1311548400"
+                "timestamp": "1311552000"
             },
             "office": "Tokyo",
             "extn": "8422"
@@ -39,7 +39,7 @@
             "salary": "$433,060",
             "start_date": {
                 "display": "Thu 29th Mar 12",
-                "timestamp": "1332975600"
+                "timestamp": "1332979200"
             },
             "office": "Edinburgh",
             "extn": "6224"
@@ -72,7 +72,7 @@
             "salary": "$137,500",
             "start_date": {
                 "display": "Mon 6th Aug 12",
-                "timestamp": "1344207600"
+                "timestamp": "1344211200"
             },
             "office": "San Francisco",
             "extn": "9608"
@@ -83,7 +83,7 @@
             "salary": "$327,900",
             "start_date": {
                 "display": "Thu 14th Oct 10",
-                "timestamp": "1287010800"
+                "timestamp": "1287014400"
             },
             "office": "Tokyo",
             "extn": "6200"
@@ -94,7 +94,7 @@
             "salary": "$205,500",
             "start_date": {
                 "display": "Tue 15th Sep 09",
-                "timestamp": "1252969200"
+                "timestamp": "1252972800"
             },
             "office": "San Francisco",
             "extn": "2360"
@@ -138,7 +138,7 @@
             "salary": "$470,600",
             "start_date": {
                 "display": "Thu 16th Oct 08",
-                "timestamp": "1224111600"
+                "timestamp": "1224115200"
             },
             "office": "San Francisco",
             "extn": "6741"
@@ -182,7 +182,7 @@
             "salary": "$725,000",
             "start_date": {
                 "display": "Wed 9th Jun 10",
-                "timestamp": "1276038000"
+                "timestamp": "1276041600"
             },
             "office": "New York",
             "extn": "3059"
@@ -193,7 +193,7 @@
             "salary": "$237,500",
             "start_date": {
                 "display": "Fri 10th Apr 09",
-                "timestamp": "1239318000"
+                "timestamp": "1239321600"
             },
             "office": "New York",
             "extn": "1721"
@@ -204,7 +204,7 @@
             "salary": "$132,000",
             "start_date": {
                 "display": "Sat 13th Oct 12",
-                "timestamp": "1350082800"
+                "timestamp": "1350086400"
             },
             "office": "London",
             "extn": "2558"
@@ -215,7 +215,7 @@
             "salary": "$217,500",
             "start_date": {
                 "display": "Wed 26th Sep 12",
-                "timestamp": "1348614000"
+                "timestamp": "1348617600"
             },
             "office": "Edinburgh",
             "extn": "2290"
@@ -226,7 +226,7 @@
             "salary": "$345,000",
             "start_date": {
                 "display": "Sat 3rd Sep 11",
-                "timestamp": "1315004400"
+                "timestamp": "1315008000"
             },
             "office": "New York",
             "extn": "1937"
@@ -237,7 +237,7 @@
             "salary": "$675,000",
             "start_date": {
                 "display": "Thu 25th Jun 09",
-                "timestamp": "1245884400"
+                "timestamp": "1245888000"
             },
             "office": "New York",
             "extn": "6154"
@@ -259,7 +259,7 @@
             "salary": "$85,600",
             "start_date": {
                 "display": "Mon 20th Sep 10",
-                "timestamp": "1284937200"
+                "timestamp": "1284940800"
             },
             "office": "Sidney",
             "extn": "3023"
@@ -270,7 +270,7 @@
             "salary": "$1,200,000",
             "start_date": {
                 "display": "Fri 9th Oct 09",
-                "timestamp": "1255042800"
+                "timestamp": "1255046400"
             },
             "office": "London",
             "extn": "5797"
@@ -303,7 +303,7 @@
             "salary": "$206,850",
             "start_date": {
                 "display": "Tue 7th Jun 11",
-                "timestamp": "1307401200"
+                "timestamp": "1307404800"
             },
             "office": "San Francisco",
             "extn": "1314"
@@ -325,7 +325,7 @@
             "salary": "$163,000",
             "start_date": {
                 "display": "Sun 14th Aug 11",
-                "timestamp": "1313276400"
+                "timestamp": "1313280000"
             },
             "office": "Tokyo",
             "extn": "8899"
@@ -336,7 +336,7 @@
             "salary": "$95,400",
             "start_date": {
                 "display": "Thu 2nd Jun 11",
-                "timestamp": "1306969200"
+                "timestamp": "1306972800"
             },
             "office": "Sidney",
             "extn": "2769"
@@ -347,7 +347,7 @@
             "salary": "$114,500",
             "start_date": {
                 "display": "Thu 22nd Oct 09",
-                "timestamp": "1256166000"
+                "timestamp": "1256169600"
             },
             "office": "London",
             "extn": "6832"
@@ -358,7 +358,7 @@
             "salary": "$145,000",
             "start_date": {
                 "display": "Sat 7th May 11",
-                "timestamp": "1304722800"
+                "timestamp": "1304726400"
             },
             "office": "London",
             "extn": "3606"
@@ -369,7 +369,7 @@
             "salary": "$235,500",
             "start_date": {
                 "display": "Sun 26th Oct 08",
-                "timestamp": "1224975600"
+                "timestamp": "1224979200"
             },
             "office": "San Francisco",
             "extn": "2860"
@@ -446,7 +446,7 @@
             "salary": "$645,750",
             "start_date": {
                 "display": "Fri 26th Sep 08",
-                "timestamp": "1222383600"
+                "timestamp": "1222387200"
             },
             "office": "New York",
             "extn": "1042"
@@ -468,7 +468,7 @@
             "salary": "$163,500",
             "start_date": {
                 "display": "Tue 3rd May 11",
-                "timestamp": "1304377200"
+                "timestamp": "1304380800"
             },
             "office": "London",
             "extn": "6222"
@@ -479,7 +479,7 @@
             "salary": "$139,575",
             "start_date": {
                 "display": "Wed 19th Aug 09",
-                "timestamp": "1250636400"
+                "timestamp": "1250640000"
             },
             "office": "Tokyo",
             "extn": "9383"
@@ -490,7 +490,7 @@
             "salary": "$98,540",
             "start_date": {
                 "display": "Sun 11th Aug 13",
-                "timestamp": "1376175600"
+                "timestamp": "1376179200"
             },
             "office": "New York",
             "extn": "8327"
@@ -501,7 +501,7 @@
             "salary": "$87,500",
             "start_date": {
                 "display": "Tue 7th Jul 09",
-                "timestamp": "1246921200"
+                "timestamp": "1246924800"
             },
             "office": "San Francisco",
             "extn": "2927"
@@ -512,7 +512,7 @@
             "salary": "$138,575",
             "start_date": {
                 "display": "Mon 9th Apr 12",
-                "timestamp": "1333926000"
+                "timestamp": "1333929600"
             },
             "office": "Singapore",
             "extn": "8352"
@@ -534,7 +534,7 @@
             "salary": "$115,000",
             "start_date": {
                 "display": "Fri 1st Jun 12",
-                "timestamp": "1338505200"
+                "timestamp": "1338508800"
             },
             "office": "San Francisco",
             "extn": "4389"
@@ -589,7 +589,7 @@
             "salary": "$86,500",
             "start_date": {
                 "display": "Wed 14th Jul 10",
-                "timestamp": "1279062000"
+                "timestamp": "1279065600"
             },
             "office": "San Francisco",
             "extn": "8196"
@@ -611,7 +611,7 @@
             "salary": "$183,000",
             "start_date": {
                 "display": "Mon 27th Jun 11",
-                "timestamp": "1309129200"
+                "timestamp": "1309132800"
             },
             "office": "Singapore",
             "extn": "5384"

examples/ajax/deep.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"processing": true,
@@ -35,26 +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>
-
 			<div class="info">
-				<p>DataTables has the ability to use data from almost data JSON data source through the use of the <a href=
+				<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">{
+				<pre><code class="multiline">{
 	"name": "Tiger Nixon",
 	"hr": {
 		"position": "System Architect",
@@ -66,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>
@@ -81,7 +74,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -93,7 +85,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -101,7 +92,6 @@ $(document).ready(function() {
 				<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() {
@@ -118,37 +108,35 @@ $(document).ready(function() {
 		]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -157,155 +145,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Ajax</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="./objects.html">Ajax data source (objects)</a></li>
-							<li class="active"><a href="./deep.html">Nested object data (objects)</a></li>
-							<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="./null_data_source.html">Generated content for a column</a></li>
-							<li><a href="./custom_data_property.html">Custom data source property</a></li>
-							<li><a href="./custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li class="active">
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../server_side/index.html">Server-side</a></h3>
 						<ul class="toc">
-							<li><a href="../server_side/simple.html">Server-side processing</a></li>
-							<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="../server_side/post.html">POST data</a></li>
-							<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="../server_side/object_data.html">Object data source</a></li>
-							<li><a href="../server_side/row_details.html">Row details</a></li>
-							<li><a href="../server_side/select_rows.html">Row selection</a></li>
-							<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/defer_render.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"ajax": "data/arrays.txt",
@@ -27,27 +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>
-
 			<div class="info">
 				<p>When working with large data sources, you might seek to improve the speed at which DataTables runs. One method to do this is to make use of the built-in
 				deferred rendering option in DataTables with the <a href="//datatables.net/reference/option/deferRender"><code class="option" title=
 				"DataTables initialisation option">deferRender</code></a> option.</p>
-
 				<p>When deferred rendering is enabled, rather than having DataTables create all <code class="tag" title="HTML tag">TR</code> and <code class="tag" title=
 				"HTML tag">TD</code> nodes required for the table when the data is loaded, DataTables will only create the nodes required for each individual row at the time of
 				that row being drawn on the page (these nodes are then retained in case they are needed again so they aren't created multiple times). This can give a significant
 				performance increase, since a lot less work is done at initialisation time.</p>
-
 				<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll likely notice no difference, but larger tables can benefit
 				significantly from simply enabling this parameter.</p>
 			</div>
-
-			<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>
@@ -58,7 +53,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -70,7 +64,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -78,7 +71,6 @@ $(document).ready(function() {
 				<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() {
@@ -87,37 +79,35 @@ $(document).ready(function() {
 		&quot;deferRender&quot;: true
 	} );
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -126,155 +116,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Ajax</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="./objects.html">Ajax data source (objects)</a></li>
-							<li><a href="./deep.html">Nested object data (objects)</a></li>
-							<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="./null_data_source.html">Generated content for a column</a></li>
-							<li><a href="./custom_data_property.html">Custom data source property</a></li>
-							<li><a href="./custom_data_flat.html">Flat array data source</a></li>
-							<li class="active"><a href="./defer_render.html">Deferred rendering for speed</a></li>
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li class="active">
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../server_side/index.html">Server-side</a></h3>
 						<ul class="toc">
-							<li><a href="../server_side/simple.html">Server-side processing</a></li>
-							<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="../server_side/post.html">POST data</a></li>
-							<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="../server_side/object_data.html">Object data source</a></li>
-							<li><a href="../server_side/row_details.html">Row details</a></li>
-							<li><a href="../server_side/select_rows.html">Row selection</a></li>
-							<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/index.html

@@ -3,59 +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="initial-scale=1.0, maximum-scale=2.0">
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
-
 	<title>DataTables examples - Ajax sourced data</title>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Ajax sourced data</span></h1>
-
 			<div class="info">
 				<p>DataTables can read data from a server via Ajax, while still performing searching, ordering, paging etc on the client-side. This is done through use of the
 				<a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option, which has a number of
 				options to customise how the data is retrieved from the server.</p>
-
 				<p>The examples in this section demonstrate the use of Ajax loading data in DataTables, with client-side processing.</p>
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="./index.html">Ajax</a></h3>
 						<ul class="toc">
-							<li><a href="./simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="./objects.html">Ajax data source (objects)</a></li>
-							<li><a href="./deep.html">Nested object data (objects)</a></li>
-							<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="./null_data_source.html">Generated content for a column</a></li>
-							<li><a href="./custom_data_property.html">Custom data source property</a></li>
-							<li><a href="./custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
 						</ul>
 					</div>
 				</div>
-
 				<div class="epilogue">
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/null_data_source.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	var table = $('#example').DataTable( {
 		"ajax": "data/arrays.txt",
@@ -36,34 +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>
-
 			<div class="info">
 				<p>In some tables you might wish to have some content generated automatically. This can be done in a number of ways:</p>
-
 				<ul class="markdown">
-					<li><a href="//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render</code></a> for
-					content that is dynamic (i.e. based upon the row's data)</li>
-					<li><a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
-					"DataTables initialisation option">columns.defaultContent</code></a> for static content (i.e. simple strings)</li>
+					<li>
+						<a href="//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/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
-				that should be obtained data source object.</p>
+				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>
@@ -74,7 +72,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -86,7 +83,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -94,7 +90,6 @@ $(document).ready(function() {
 				<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() {
@@ -112,37 +107,35 @@ $(document).ready(function() {
 		alert( data[0] +&quot;'s salary is: &quot;+ data[ 5 ] );
 	} );
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -151,155 +144,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Ajax</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="./objects.html">Ajax data source (objects)</a></li>
-							<li><a href="./deep.html">Nested object data (objects)</a></li>
-							<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
-							<li class="active"><a href="./null_data_source.html">Generated content for a column</a></li>
-							<li><a href="./custom_data_property.html">Custom data source property</a></li>
-							<li><a href="./custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li class="active">
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../server_side/index.html">Server-side</a></h3>
 						<ul class="toc">
-							<li><a href="../server_side/simple.html">Server-side processing</a></li>
-							<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="../server_side/post.html">POST data</a></li>
-							<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="../server_side/object_data.html">Object data source</a></li>
-							<li><a href="../server_side/row_details.html">Row details</a></li>
-							<li><a href="../server_side/select_rows.html">Row selection</a></li>
-							<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/objects.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"ajax": "data/objects.txt",
@@ -34,25 +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>
-
 			<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">{
+				<pre><code class="multiline">{
 	"name":	   "Tiger Nixon",
 	"position":   "System Architect",
 	"salary":	 "$3,120",
@@ -60,13 +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>
@@ -77,7 +69,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -89,7 +80,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -97,7 +87,6 @@ $(document).ready(function() {
 				<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() {
@@ -113,37 +102,35 @@ $(document).ready(function() {
 		]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -152,155 +139,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Ajax</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Ajax data source (arrays)</a></li>
-							<li class="active"><a href="./objects.html">Ajax data source (objects)</a></li>
-							<li><a href="./deep.html">Nested object data (objects)</a></li>
-							<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="./null_data_source.html">Generated content for a column</a></li>
-							<li><a href="./custom_data_property.html">Custom data source property</a></li>
-							<li><a href="./custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li class="active">
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../server_side/index.html">Server-side</a></h3>
 						<ul class="toc">
-							<li><a href="../server_side/simple.html">Server-side processing</a></li>
-							<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="../server_side/post.html">POST data</a></li>
-							<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="../server_side/object_data.html">Object data source</a></li>
-							<li><a href="../server_side/row_details.html">Row details</a></li>
-							<li><a href="../server_side/select_rows.html">Row selection</a></li>
-							<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/objects_subarrays.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"ajax": "data/objects_subarrays.txt",
@@ -34,27 +33,22 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Nested object data (arrays)</span></h1>
-
 			<div class="info">
 				<p>The information read from an Ajax data source can be arbitrarily complex, but still be displayed by DataTables through the <a href=
 				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, which is
 				particularly useful for working with JSON feeds in an already defined format.</p>
-
 				<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option has
 				the ability to read information not only from objects, but also from arrays using the same dotted object syntax as for objects. In addition to this, when working
 				with an array data source <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
 				"DataTables initialisation option">columns.data</code></a> can process the data to combine and display the data in simple forms (more complex forms can be defined
 				by using <a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> as a
 				function).</p>
-
 				<p>This example shows two different aspects of using <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
 				"DataTables initialisation option">columns.data</code></a> to read arrays:</p>
-
 				<ul class="markdown">
 					<li>The <em>Name</em> column is sourced from an array of two elements (first and last name), which are automatically concatenated together. This is done by
 					using array bracket syntax, with the characters between the brackets being used as the glue between elements (e.g. <code>name[, ]</code>).</li>
@@ -62,8 +56,7 @@ $(document).ready(function() {
 					<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"
@@ -76,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>
@@ -91,7 +83,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -103,7 +94,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -111,7 +101,6 @@ $(document).ready(function() {
 				<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() {
@@ -127,37 +116,35 @@ $(document).ready(function() {
 		]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -166,155 +153,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Ajax</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="./objects.html">Ajax data source (objects)</a></li>
-							<li><a href="./deep.html">Nested object data (objects)</a></li>
-							<li class="active"><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="./null_data_source.html">Generated content for a column</a></li>
-							<li><a href="./custom_data_property.html">Custom data source property</a></li>
-							<li><a href="./custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
+							<li>
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li class="active">
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../server_side/index.html">Server-side</a></h3>
 						<ul class="toc">
-							<li><a href="../server_side/simple.html">Server-side processing</a></li>
-							<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="../server_side/post.html">POST data</a></li>
-							<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="../server_side/object_data.html">Object data source</a></li>
-							<li><a href="../server_side/row_details.html">Row details</a></li>
-							<li><a href="../server_side/select_rows.html">Row selection</a></li>
-							<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/orthogonal-data.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		ajax: "data/orthogonal.txt",
@@ -37,25 +36,20 @@ $(document).ready(function() {
 
 	</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">{
+				<pre><code class="multiline">{
 	"name":	   "Tiger Nixon",
 	"position":   "System Architect",
 	"salary":	 "$3,120",
@@ -66,11 +60,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>
@@ -81,7 +74,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -93,7 +85,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -101,7 +92,6 @@ $(document).ready(function() {
 				<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() {
@@ -120,37 +110,35 @@ $(document).ready(function() {
 		]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -159,155 +147,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/simple.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"ajax": "data/arrays.txt"
@@ -26,29 +25,23 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Ajax data source (arrays)</span></h1>
-
 			<div class="info">
 				<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting
 				the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option to the address of the
 				JSON data source.</p>
-
 				<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option also allows for more
 				advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
 				"DataTables initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for further information.</p>
-
 				<p>By default DataTables will assume that an array data source is to be used and will read the information to be displayed in each column from the row's array
-				using the column index, making working with arrays very simple (note that this can be changed, or objects used may using the <a href=
+				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">[
+				<pre><code class="multiline">[
 	"Tiger Nixon",
 	"System Architect",
 	"Edinburgh",
@@ -56,13 +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>
@@ -73,7 +64,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -85,7 +75,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -93,7 +82,6 @@ $(document).ready(function() {
 				<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() {
@@ -101,37 +89,35 @@ $(document).ready(function() {
 		&quot;ajax&quot;: &quot;data/arrays.txt&quot;
 	} );
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -140,155 +126,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<li>
+								<a href="../api/add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="../api/highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="../api/select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="../api/form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="../api/counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="../api/show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="../api/api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="../api/regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">Ajax</a></h3>
 						<ul class="toc active">
-							<li class="active"><a href="./simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="./objects.html">Ajax data source (objects)</a></li>
-							<li><a href="./deep.html">Nested object data (objects)</a></li>
-							<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="./null_data_source.html">Generated content for a column</a></li>
-							<li><a href="./custom_data_property.html">Custom data source property</a></li>
-							<li><a href="./custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
+							<li class="active">
+								<a href="./simple.html">Ajax data source (arrays)</a>
+							</li>
+							<li>
+								<a href="./objects.html">Ajax data source (objects)</a>
+							</li>
+							<li>
+								<a href="./deep.html">Nested object data (objects)</a>
+							</li>
+							<li>
+								<a href="./objects_subarrays.html">Nested object data (arrays)</a>
+							</li>
+							<li>
+								<a href="./orthogonal-data.html">Orthogonal data</a>
+							</li>
+							<li>
+								<a href="./null_data_source.html">Generated content for a column</a>
+							</li>
+							<li>
+								<a href="./custom_data_property.html">Custom data source property</a>
+							</li>
+							<li>
+								<a href="./custom_data_flat.html">Flat array data source</a>
+							</li>
+							<li>
+								<a href="./defer_render.html">Deferred rendering for speed</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../server_side/index.html">Server-side</a></h3>
 						<ul class="toc">
-							<li><a href="../server_side/simple.html">Server-side processing</a></li>
-							<li><a href="../server_side/custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="../server_side/post.html">POST data</a></li>
-							<li><a href="../server_side/ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="../server_side/object_data.html">Object data source</a></li>
-							<li><a href="../server_side/row_details.html">Row details</a></li>
-							<li><a href="../server_side/select_rows.html">Row selection</a></li>
-							<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/add_row.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	var t = $('#example').DataTable();
@@ -30,7 +29,7 @@ $(document).ready(function() {
 			counter +'.3',
 			counter +'.4',
 			counter +'.5'
-		] ).draw();
+		] ).draw( false );
 
 		counter++;
 	} );
@@ -42,30 +41,27 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Add rows</span></h1>
-
 			<div class="info">
-				<p>New rows can be added to a DataTable very easily 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 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/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a>
-				method (note the plural). Data can be likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title=
+				<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 makes use of.</p>
-
+				"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API employs.</p>
 				<p>This example shows a single row being added each time the button below is clicked upon.</p>
-
-				<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls, including creating, editing and deleting rows, to a
-				DataTable.</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>
@@ -75,7 +71,6 @@ $(document).ready(function() {
 						<th>Column 5</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Column 1</th>
@@ -86,7 +81,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -94,7 +88,6 @@ $(document).ready(function() {
 				<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() {
@@ -108,7 +101,7 @@ $(document).ready(function() {
 			counter +'.3',
 			counter +'.4',
 			counter +'.5'
-		] ).draw();
+		] ).draw( false );
 
 		counter++;
 	} );
@@ -116,37 +109,35 @@ $(document).ready(function() {
 	// Automatically add a first row of data
 	$('#addRow').click();
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -155,155 +146,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<li class="active">
+								<a href="./add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="./multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="./highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="./select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../ajax/index.html">Ajax</a></h3>
 						<ul class="toc">
-							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
-							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
-							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
-							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
-							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/api_in_init.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Using API in callbacks</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -33,12 +32,10 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Using API in callbacks</span></h1>
-
 			<div class="info">
 				<p>There are times when you may wish to call API functions inside the DataTables callback functions (for example <a href=
 				"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a>, <a href=
@@ -46,16 +43,14 @@ $(document).ready(function() {
 				with this is that the object hasn't fully initialised, so you can't assign the result to a variable and then use that variable in the callback. However, all of
 				DataTables' callback functions are executed in the scope of the DataTable instance, so you can use the Javascript special variable <code>this</code> to access the
 				API (<code>this.api()</code> will give an API instance) as <code>this</code> is the <code class="tag" title="HTML tag">table</code> node.</p>
-
 				<p>In this example you will be able to see that the <a href="//datatables.net/reference/api/%24()"><code class="api" title="DataTables API method">$()</code></a>
 				method is used to get all cell nodes in the table's body and then act on them (in this case adding a click event). The action here is to apply a filter to the
 				table with the value of what is in each cell.</p>
-
 				<p>It is also worth noting that this same effect could be achieved by attaching a delegated click event after the table has been initialised - but the example
 				shows the use of the API inside the callbacks!</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>
@@ -66,18 +61,6 @@ $(document).ready(function() {
 						<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>
@@ -536,8 +519,17 @@ $(document).ready(function() {
 						<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>
@@ -545,7 +537,6 @@ $(document).ready(function() {
 				<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() {
@@ -558,37 +549,35 @@ $(document).ready(function() {
 		}
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -597,155 +586,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">API</a></h3>
 						<ul class="toc active">
-							<li><a href="./add_row.html">Add rows</a></li>
-							<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
-							<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
-							<li><a href="./highlight.html">Highlighting rows and columns</a></li>
-							<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
-							<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
-							<li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
-							<li><a href="./form.html">Form inputs</a></li>
-							<li><a href="./counter_columns.html">Index column</a></li>
-							<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
-							<li class="active"><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>
+							<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 class="active">
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../ajax/index.html">Ajax</a></h3>
 						<ul class="toc">
-							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
-							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
-							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
-							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
-							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/counter_columns.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Index column</title>
 	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
 	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
 	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
 	<style type="text/css" class="init">
-
+	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	var t = $('#example').DataTable( {
@@ -39,16 +38,13 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Index column</span></h1>
-
 			<div class="info">
-				<p>Highly-interactive tables often require a 'counter' column that contains the position in the table for each row. This column should not be sortable, and will
+				<p>Highly-interactive tables often require a 'counter' column that contains the position for each row in the table. This column should not be sortable, and will
 				change dynamically as the ordering and searching applied to the table is altered by the end user.</p>
-
 				<p>This example shows how this can be achieved with DataTables, where the first column is the counter column, and is updated when ordering or searching occurs.
 				This is done by listening for the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order</code></a> and <a href=
 				"//datatables.net/reference/event/search"><code class="event" title="DataTables event">search</code></a> events emitted by the table. When these events are
@@ -57,8 +53,8 @@ $(document).ready(function() {
 				Note that the <code>filter</code> and <code>order</code> options are using in the <a href="//datatables.net/reference/api/column()"><code class="api" title=
 				"DataTables API method">column()</code></a> method to get the nodes in the current order and with the currently applied filter.</p>
 			</div>
-
-			<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>
@@ -69,18 +65,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
-				<tfoot>
-					<tr>
-						<th></th>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Age</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
-
 				<tbody>
 					<tr>
 						<td></td>
@@ -539,8 +523,17 @@ $(document).ready(function() {
 						<td>$112,000</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th></th>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Age</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -548,7 +541,6 @@ $(document).ready(function() {
 				<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() {
@@ -567,37 +559,35 @@ $(document).ready(function() {
 		} );
 	} ).draw();
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -606,155 +596,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">API</a></h3>
 						<ul class="toc active">
-							<li><a href="./add_row.html">Add rows</a></li>
-							<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
-							<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
-							<li><a href="./highlight.html">Highlighting rows and columns</a></li>
-							<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
-							<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
-							<li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
-							<li><a href="./form.html">Form inputs</a></li>
-							<li class="active"><a href="./counter_columns.html">Index column</a></li>
-							<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
-							<li><a href="./api_in_init.html">Using API in callbacks</a></li>
-							<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
-							<li><a href="./regex.html">Search API (regular expressions)</a></li>
+							<li>
+								<a href="./add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="./multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="./highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="./select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li class="active">
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../ajax/index.html">Ajax</a></h3>
 						<ul class="toc">
-							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
-							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
-							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
-							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
-							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/highlight.html

@@ -3,14 +3,13 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Highlighting rows and columns</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.highlight {
 	background-color: whitesmoke !important;
@@ -18,52 +17,43 @@ td.highlight {
 
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
-	var lastIdx = null;
 	var table = $('#example').DataTable();
 	
 	$('#example tbody')
-		.on( 'mouseover', 'td', function () {
+		.on( 'mouseenter', 'td', function () {
 			var colIdx = table.cell(this).index().column;
 
-			if ( colIdx !== lastIdx ) {
-				$( table.cells().nodes() ).removeClass( 'highlight' );
-				$( table.column( colIdx ).nodes() ).addClass( 'highlight' );
-			}
-		} )
-		.on( 'mouseleave', function () {
 			$( table.cells().nodes() ).removeClass( 'highlight' );
+			$( table.column( colIdx ).nodes() ).addClass( 'highlight' );
 		} );
 } );
 
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Highlighting rows and columns</span></h1>
-
 			<div class="info">
-				<p>Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow
-				columns. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
-
-				<p>This example shows that in action on DataTable by making use of the <a href="//datatables.net/reference/api/cell().index()"><code class="api" title=
+				<p>Highlighting rows and columns can be useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow columns.
+				Highlighting a row is easy using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
+				<p>This example shows DataTables making use of the <a href="//datatables.net/reference/api/cell().index()"><code class="api" title=
 				"DataTables API method">cell().index()</code></a> method to get the index of the column that is to be operated on, and then the <a href=
 				"//datatables.net/reference/api/cells().nodes()"><code class="api" title="DataTables API method">cells().nodes()</code></a> and <a href=
 				"//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()</code></a> methods to remove old classes and
 				apply the new highlighted class, respectively.</p>
 			</div>
-
-			<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="row-border hover order-column" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -74,18 +64,6 @@ $(document).ready(function() {
 						<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>
@@ -544,8 +522,17 @@ $(document).ready(function() {
 						<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>
@@ -553,39 +540,32 @@ $(document).ready(function() {
 				<li>Ajax</li>
 				<li>Server-side script</li>
 			</ul>
-
 			<div class="tabs">
 				<div class="js">
 					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
-	var lastIdx = null;
 	var table = $('#example').DataTable();
 	
 	$('#example tbody')
-		.on( 'mouseover', 'td', function () {
+		.on( 'mouseenter', 'td', function () {
 			var colIdx = table.cell(this).index().column;
 
-			if ( colIdx !== lastIdx ) {
-				$( table.cells().nodes() ).removeClass( 'highlight' );
-				$( table.column( colIdx ).nodes() ).addClass( 'highlight' );
-			}
-		} )
-		.on( 'mouseleave', function () {
 			$( table.cells().nodes() ).removeClass( 'highlight' );
+			$( table.column( colIdx ).nodes() ).addClass( 'highlight' );
 		} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
@@ -593,19 +573,17 @@ $(document).ready(function() {
 	background-color: whitesmoke !important;
 }</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="../../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
@@ -614,155 +592,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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 class="active"><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>
+							<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 class="active">
+								<a href="./highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="./select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../ajax/index.html">Ajax</a></h3>
 						<ul class="toc">
-							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
-							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
-							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
-							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
-							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/index.html

@@ -3,60 +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="initial-scale=1.0, maximum-scale=2.0">
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
-
 	<title>DataTables examples - API</title>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>API</span></h1>
-
 			<div class="info">
 				<p>The real power of DataTables can be exploited through the use of the API that it presents. The DataTables API is designed to be simple, consistent and easy to
 				use. The examples in this section show how the API may be used.</p>
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="./index.html">API</a></h3>
 						<ul class="toc">
-							<li><a href="./add_row.html">Add rows</a></li>
-							<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
-							<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
-							<li><a href="./highlight.html">Highlighting rows and columns</a></li>
-							<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
-							<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
-							<li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
-							<li><a href="./form.html">Form inputs</a></li>
-							<li><a href="./counter_columns.html">Index column</a></li>
-							<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
-							<li><a href="./api_in_init.html">Using API in callbacks</a></li>
-							<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
-							<li><a href="./regex.html">Search API (regular expressions)</a></li>
+							<li>
+								<a href="./add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="./multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="./highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="./select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
 				</div>
-
 				<div class="epilogue">
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/multi_filter.html

@@ -3,14 +3,13 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Individual column searching (text inputs)</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">
-
+	
 	tfoot input {
 		width: 100%;
 		padding: 3px;
@@ -18,17 +17,17 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	// Setup - add a text input to each footer cell
 	$('#example tfoot th').each( function () {
-		var title = $('#example thead th').eq( $(this).index() ).text();
+		var title = $(this).text();
 		$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
 	} );
 
@@ -40,9 +39,11 @@ $(document).ready(function() {
 		var that = this;
 
 		$( 'input', this.footer() ).on( 'keyup change', function () {
-			that
-				.search( this.value )
-				.draw();
+			if ( that.search() !== this.value ) {
+				that
+					.search( this.value )
+					.draw();
+			}
 		} );
 	} );
 } );
@@ -50,30 +51,25 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Individual column searching (text inputs)</span></h1>
-
 			<div class="info">
-				<p>The searching functionality that is provided by DataTables is very useful for quickly search through the information in the table - however the search is
-				global, and you may wish to present controls to search on specific columns only.</p>
-
+				<p>The searching functionality provided by DataTables is useful for quickly search through the information in the table - however the search is global, and you may
+				wish to present controls that search on specific columns.</p>
 				<p>DataTables has the ability to apply searching to a specific column through the <a href="//datatables.net/reference/api/column().search()"><code class="api"
-				title="DataTables API method">column().search()</code></a> method (note that the name of the method is <code>search</code> not <code>filter</code> since <a href=
+				title="DataTables API method">column().search()</code></a> method (note that the name of the method is <code>search</code> not <code>filter</code>, since <a href=
 				"//datatables.net/reference/api/filter()"><code class="api" title="DataTables API method">filter()</code></a> is used to apply a filter to a result set).</p>
-
 				<p>The column searches are cumulative, so you can apply multiple individual column searches, in addition to the global search, allowing complex searching options
 				to be presented to the user.</p>
-
 				<p>This examples shows text elements being used with the <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
 				"DataTables API method">column().search()</code></a> method to add input controls in the footer of the table for each column. Note that the
 				<code>*index*:visible</code> option is used for the column selector to ensure that the <a href="//datatables.net/reference/api/column()"><code class="api" title=
 				"DataTables API method">column()</code></a> method takes into account any hidden columns when selecting the column to act upon.</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>
@@ -84,18 +80,6 @@ $(document).ready(function() {
 						<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>
@@ -554,8 +538,17 @@ $(document).ready(function() {
 						<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>
@@ -563,13 +556,12 @@ $(document).ready(function() {
 				<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() {
 	// Setup - add a text input to each footer cell
 	$('#example tfoot th').each( function () {
-		var title = $('#example thead th').eq( $(this).index() ).text();
+		var title = $(this).text();
 		$(this).html( '&lt;input type=&quot;text&quot; placeholder=&quot;Search '+title+'&quot; /&gt;' );
 	} );
 
@@ -581,25 +573,27 @@ $(document).ready(function() {
 		var that = this;
 
 		$( 'input', this.footer() ).on( 'keyup change', function () {
-			that
-				.search( this.value )
-				.draw();
+			if ( that.search() !== this.value ) {
+				that
+					.search( this.value )
+					.draw();
+			}
 		} );
 	} );
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
@@ -609,19 +603,17 @@ $(document).ready(function() {
 		box-sizing: border-box;
 	}</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="../../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
@@ -630,155 +622,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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 class="active"><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>
+							<li>
+								<a href="./add_row.html">Add rows</a>
+							</li>
+							<li class="active">
+								<a href="./multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="./highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="./select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../ajax/index.html">Ajax</a></h3>
 						<ul class="toc">
-							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
-							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
-							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
-							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
-							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/multi_filter_select.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Individual column searching (select inputs)</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -47,39 +46,34 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Individual column searching (select inputs)</span></h1>
-
 			<div class="info">
 				<p>This example is almost identical to text based individual column example and provides the same functionality, but in this case using <code class="tag" title=
 				"HTML tag">select</code> input controls.</p>
-
 				<p>After the table is initialised, the API is used to build the <code class="tag" title="HTML tag">select</code> inputs through the use of the <a href=
 				"//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()</code></a> method to get the data for each column
 				in turn. The helper methods <a href="//datatables.net/reference/api/unique()"><code class="api" title="DataTables API method">unique()</code></a> and <a href=
 				"//datatables.net/reference/api/sort()"><code class="api" title="DataTables API method">sort()</code></a> are also used to reduce the data for set input to unique
 				and ordered elements. Finally the <code>change</code> event from the <code class="tag" title="HTML tag">select</code> input is used to trigger a column search
 				using the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method.</p>
-
 				<p>Note that the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method in
-				this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built in smart searching. For more information
-				on the search options in DataTables API please refer to the documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
+				this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built-in smart searching. For more information
+				on the search options in DataTables API, please refer to the documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
 				"DataTables API method">search()</code></a>, <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
 				"DataTables API method">column().search()</code></a> and <a href="//datatables.net/reference/api/%24.fn.dataTable.util.escapeRegex()"><code class="api" title=
 				"DataTables API method">$.fn.dataTable.util.escapeRegex()</code></a> which are used for searching globally, by column and escaping regular expressions
 				respectively.</p>
-
-				<p>Note also that this example shows the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
-				"DataTables initialisation option">initComplete</code></a> a callback function that is triggered when the table has fully loaded. Use of this callback isn't
-				actually required in this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
+				<p>Also note this example demonstrates the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
+				"DataTables initialisation option">initComplete</code></a>, a callback function triggered when the table has fully loaded. Use of this callback isn't required in
+				this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
 				"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a> is useful to execute code
 				after the data has been loaded.</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>
@@ -90,18 +84,6 @@ $(document).ready(function() {
 						<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>
@@ -560,8 +542,17 @@ $(document).ready(function() {
 						<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>
@@ -569,7 +560,6 @@ $(document).ready(function() {
 				<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() {
@@ -596,37 +586,35 @@ $(document).ready(function() {
 		}
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -635,155 +623,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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 class="active"><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>
+							<li>
+								<a href="./add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="./multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li class="active">
+								<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="./highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="./select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../ajax/index.html">Ajax</a></h3>
 						<ul class="toc">
-							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
-							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
-							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
-							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
-							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/regex.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Search API (regular expressions)</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 function filterGlobal () {
 	$('#example').DataTable().search( 
@@ -50,85 +49,79 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Search API (regular expressions)</span></h1>
-
 			<div class="info">
 				<p>Searching a table is one of the most common user interactions with a DataTables table, and DataTables provides a number of methods for you to control this
 				interaction. There are APIs for the global search (<a href="//datatables.net/reference/api/search()"><code class="api" title=
 				"DataTables API method">search()</code></a>) and for each individual column (<a href="//datatables.net/reference/api/column().search()"><code class="api" title=
 				"DataTables API method">column().search()</code></a>).</p>
-
 				<p>Note also that you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method after
 				performing the search, in order for the results to be displayed.</p>
-
 				<p>Each search (global or column) can be marked as a regular expression (allowing you to create very complex interactions) and as a smart search or not. When smart
 				searching is enabled on a particular search, DataTables will modify the user input string to a complex regular expression which can make searching more
 				intuitive.</p>
-
 				<p>This example allows you to "play" with the various searching options that DataTables provides.</p>
 			</div>
-
-			<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
-				<thead>
-					<tr>
-						<th>Target</th>
-						<th>Search text</th>
-						<th>Treat as regex</th>
-						<th>Use smart search</th>
-					</tr>
-				</thead>
-
-				<tbody>
-					<tr id="filter_global">
-						<td>Global search</td>
-						<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
-						<td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
-						<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
-					</tr>
-					<tr id="filter_col1" data-column="0">
-						<td>Column - Name</td>
-						<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
-					</tr>
-					<tr id="filter_col2" data-column="1">
-						<td>Column - Position</td>
-						<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
-					</tr>
-					<tr id="filter_col3" data-column="2">
-						<td>Column - Office</td>
-						<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked"></td>
-					</tr>
-					<tr id="filter_col4" data-column="3">
-						<td>Column - Age</td>
-						<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col3_regex"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked="checked"></td>
-					</tr>
-					<tr id="filter_col5" data-column="4">
-						<td>Column - Start date</td>
-						<td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col4_regex"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked="checked"></td>
-					</tr>
-					<tr id="filter_col6" data-column="5">
-						<td>Column - Salary</td>
-						<td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col5_regex"></td>
-						<td align="center"><input type="checkbox" class="column_filter" id="col5_smart" checked="checked"></td>
-					</tr>
-				</tbody>
-			</table>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html">
+				<table cellpadding="3" cellspacing="0" border="0" style="width: 67%; margin: 0 auto 2em auto;">
+					<thead>
+						<tr>
+							<th>Target</th>
+							<th>Search text</th>
+							<th>Treat as regex</th>
+							<th>Use smart search</th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr id="filter_global">
+							<td>Global search</td>
+							<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
+							<td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
+							<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
+						</tr>
+						<tr id="filter_col1" data-column="0">
+							<td>Column - Name</td>
+							<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
+						</tr>
+						<tr id="filter_col2" data-column="1">
+							<td>Column - Position</td>
+							<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
+						</tr>
+						<tr id="filter_col3" data-column="2">
+							<td>Column - Office</td>
+							<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked"></td>
+						</tr>
+						<tr id="filter_col4" data-column="3">
+							<td>Column - Age</td>
+							<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col3_regex"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked="checked"></td>
+						</tr>
+						<tr id="filter_col5" data-column="4">
+							<td>Column - Start date</td>
+							<td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col4_regex"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked="checked"></td>
+						</tr>
+						<tr id="filter_col6" data-column="5">
+							<td>Column - Salary</td>
+							<td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col5_regex"></td>
+							<td align="center"><input type="checkbox" class="column_filter" id="col5_smart" checked="checked"></td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -139,18 +132,6 @@ $(document).ready(function() {
 						<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>
@@ -609,8 +590,17 @@ $(document).ready(function() {
 						<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>
@@ -618,7 +608,6 @@ $(document).ready(function() {
 				<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">function filterGlobal () {
@@ -648,37 +637,35 @@ $(document).ready(function() {
 		filterColumn( $(this).parents('tr').attr('data-column') );
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -687,155 +674,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">API</a></h3>
 						<ul class="toc active">
-							<li><a href="./add_row.html">Add rows</a></li>
-							<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
-							<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
-							<li><a href="./highlight.html">Highlighting rows and columns</a></li>
-							<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
-							<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
-							<li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
-							<li><a href="./form.html">Form inputs</a></li>
-							<li><a href="./counter_columns.html">Index column</a></li>
-							<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
-							<li><a href="./api_in_init.html">Using API in callbacks</a></li>
-							<li><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
-							<li class="active"><a href="./regex.html">Search 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 class="active">
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../ajax/index.html">Ajax</a></h3>
 						<ul class="toc">
-							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
-							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
-							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
-							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
-							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/row_details.html

@@ -3,14 +3,13 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
-
+	<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;
@@ -20,12 +19,12 @@ tr.shown td.details-control {
 }
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 /* Formatting function for row details - modify as you need */
 function format ( d ) {
@@ -85,25 +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>
-
 			<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 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 firstly 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=
+				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 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>
+				"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>
@@ -113,7 +109,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th></th>
@@ -124,7 +119,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -132,7 +126,6 @@ $(document).ready(function() {
 				<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">/* Formatting function for row details - modify as you need */
@@ -189,19 +182,19 @@ $(document).ready(function() {
 		}
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
@@ -213,19 +206,17 @@ tr.shown td.details-control {
 	background: url('../resources/details_close.png') no-repeat center center;
 }</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="../../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
@@ -234,155 +225,325 @@ tr.shown td.details-control {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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/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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/select_row.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Row selection (multiple 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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	var table = $('#example').DataTable();
@@ -34,23 +33,22 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Row selection (multiple rows)</span></h1>
-
 			<div class="info">
-				<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done by simply using a click event to add /
-				remove a class on the table rows. The <a href="//datatables.net/reference/api/rows().data()"><code class="api" title=
-				"DataTables API method">rows().data()</code></a> method can then be used to get the data for the selected rows. In this case it is simply counting the number of
-				selected rows, but much more complex interactions can easily be developed.</p>
-
-				<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
-				provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
-			</div><button id="button">Row count</button>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+				<p>It can be useful to provide the user with the option to select rows in a DataTable. This can be done by using a click event to add / remove a class on the table
+				rows. The <a href="//datatables.net/reference/api/rows().data()"><code class="api" title="DataTables API method">rows().data()</code></a> method can then be used
+				to get the data for the selected rows. In this case it is simply counting the number of selected rows, but much more complex interactions can easily be
+				developed.</p>
+				<p>If you are looking for a more complete and easier to use row selection option, the <a href="https://datatables.net/extras/select">Select extension</a> provides
+				an API that is fully integrated with DataTables for selecting rows and acting upon that secletion.</p>
+			</div>
+			<div class="demo-html">
+				<button id="button">Row count</button>
+			</div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -61,18 +59,6 @@ $(document).ready(function() {
 						<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>
@@ -531,8 +517,17 @@ $(document).ready(function() {
 						<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>
@@ -540,7 +535,6 @@ $(document).ready(function() {
 				<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() {
@@ -554,37 +548,35 @@ $(document).ready(function() {
 		alert( table.rows('.selected').data().length +' row(s) selected' );
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -593,155 +585,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">API</a></h3>
 						<ul class="toc active">
-							<li><a href="./add_row.html">Add rows</a></li>
-							<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
-							<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
-							<li><a href="./highlight.html">Highlighting rows and columns</a></li>
-							<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
-							<li class="active"><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>
+							<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 class="active">
+								<a href="./select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../ajax/index.html">Ajax</a></h3>
 						<ul class="toc">
-							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
-							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
-							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
-							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
-							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/select_single_row.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Row selection and deletion (single row)</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	var table = $('#example').DataTable();
@@ -40,27 +39,24 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Row selection and deletion (single row)</span></h1>
-
 			<div class="info">
-				<p>This example shows a modification of the multiple row selection example, where just a single can now be selected. This is done simply by checking to see if the
-				row already has a selected class or not, and if so removing it, if not then the class is removed from any other row in the table which does have it and applied to
-				the row to be selected.</p>
-
+				<p>This example modifies the multiple row selection example by only allowing the selection of a single row. This is done by checking to see if the row already has
+				a selected class, and if so removing it, but if not then the class is removed from all other rows in the table and then applied to the row being selected.</p>
 				<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title="DataTables API method">row().remove()</code></a> method which
-				will delete a row from a table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method
-				with <code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be
+				deletes a row from a table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method with
+				<code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be
 				reset to the first page).</p>
-
-				<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
-				provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
-			</div><button id="button">Delete selected row</button>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+				<p>If you are looking for a more complete and easier to use row selection option, the <a href="https://datatables.net/extras/select">Select extension</a> provides
+				an API that is fully integrated with DataTables for selecting rows and acting upon that selection.</p>
+			</div>
+			<div class="demo-html">
+				<button id="button">Delete selected row</button>
+			</div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -71,18 +67,6 @@ $(document).ready(function() {
 						<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>
@@ -541,8 +525,17 @@ $(document).ready(function() {
 						<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>
@@ -550,7 +543,6 @@ $(document).ready(function() {
 				<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() {
@@ -570,37 +562,35 @@ $(document).ready(function() {
 		table.row('.selected').remove().draw( 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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -609,155 +599,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">API</a></h3>
 						<ul class="toc active">
-							<li><a href="./add_row.html">Add rows</a></li>
-							<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
-							<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
-							<li><a href="./highlight.html">Highlighting rows and columns</a></li>
-							<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
-							<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
-							<li class="active"><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>
+							<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 class="active">
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../ajax/index.html">Ajax</a></h3>
 						<ul class="toc">
-							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
-							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
-							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
-							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
-							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/show_hide.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Show / hide columns dynamically</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	var table = $('#example').DataTable( {
@@ -39,32 +38,28 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Show / hide columns dynamically</span></h1>
-
 			<div class="info">
 				<p>This example shows how you can make use of the <a href="//datatables.net/reference/api/column().visible()"><code class="api" title=
 				"DataTables API method">column().visible()</code></a> API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it
-				enabled with this API method, although that is not required for the API function to work.</p>
-
-				<p>In addition to this, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api"
-				title="DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href=
+				enabled with this API method, although it's not required for the API function to work.</p>
+				<p>In addition, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api" title=
+				"DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href=
 				"//datatables.net/reference/api/columns().visible()"><code class="api" title="DataTables API method">columns().visible()</code></a> method to set their state.</p>
-
-				<p>If you are looking for a more complete column visibility interaction controls, check out the <a href="https://datatables.net/extras/buttons">Buttons extension
-				for DataTables</a> provides a comprehensive module for column visibility control.</p>
+				<p>If you are looking for a more complete column visibility interaction controls, the <a href="https://datatables.net/extras/buttons">Buttons extension for
+				DataTables</a> provides a comprehensive module for column visibility control.</p>
 			</div>
-
-			<div>
-				Toggle column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column="1">Position</a> - <a class="toggle-vis" data-column=
-				"2">Office</a> - <a class="toggle-vis" data-column="3">Age</a> - <a class="toggle-vis" data-column="4">Start date</a> - <a class="toggle-vis" data-column=
-				"5">Salary</a>
+			<div class="demo-html">
+				<div>
+					Toggle column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column="1">Position</a> - <a class="toggle-vis" data-column=
+					"2">Office</a> - <a class="toggle-vis" data-column="3">Age</a> - <a class="toggle-vis" data-column="4">Start date</a> - <a class="toggle-vis" data-column=
+					"5">Salary</a>
+				</div>
 			</div>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -75,18 +70,6 @@ $(document).ready(function() {
 						<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>
@@ -545,8 +528,17 @@ $(document).ready(function() {
 						<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>
@@ -554,7 +546,6 @@ $(document).ready(function() {
 				<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() {
@@ -573,37 +564,35 @@ $(document).ready(function() {
 		column.visible( ! column.visible() );
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -612,155 +601,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">API</a></h3>
 						<ul class="toc active">
-							<li><a href="./add_row.html">Add rows</a></li>
-							<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
-							<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
-							<li><a href="./highlight.html">Highlighting rows and columns</a></li>
-							<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
-							<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
-							<li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
-							<li><a href="./form.html">Form inputs</a></li>
-							<li><a href="./counter_columns.html">Index column</a></li>
-							<li class="active"><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>
+							<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 class="active">
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li>
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../ajax/index.html">Ajax</a></h3>
 						<ul class="toc">
-							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
-							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
-							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
-							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
-							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/tabs_and_scrolling.html

@@ -3,24 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Scrolling and Bootstrap tabs</title>
-	<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
 	<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.bootstrap.css">
 	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
 	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
 	<style type="text/css" class="init">
-
+	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
-	<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
+	<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/dataTables.bootstrap.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
@@ -41,34 +40,32 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example dt-example-bootstrap">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Scrolling and Bootstrap tabs</span></h1>
-
 			<div class="info">
 				<p>This example shows how DataTables with scrolling can be used together with <a href="http://getbootstrap.com/javascript/#tabs">Bootstrap tabs</a> (or indeed any
 				other method whereby the table is in a hidden, <code>display:none</code>, element when it is initialised).</p>
-
 				<p>The reason this requires special consideration is that when the DataTable is initialised in a hidden element the browser doesn't have any measurements with
 				which to give the DataTable, and this will result in the misalignment of columns when scrolling is enabled.</p>
-
 				<p>This misalignment can be corrected by the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title=
 				"DataTables API method">columns.adjust()</code></a> method when the table is made visible (i.e. it has dimensions).</p>
-
 				<p>This example shows how the Bootstrap <code>shown.bs.tab</code> event can be used to trigger this method call. The visible tables on the page are selected using
 				the static <a href="//datatables.net/reference/api/%24.fn.dataTable.tables()"><code class="api" title="DataTables API method">$.fn.dataTable.tables()</code></a>
 				method and running the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title="DataTables API method">columns.adjust()</code></a> method
 				on them.</p>
 			</div>
-
+			<div class="demo-html"></div>
 			<div>
 				<ul class="nav nav-tabs" role="tablist">
-					<li class="active"><a href="#tab-table1" data-toggle="tab">Table 1</a></li>
-					<li><a href="#tab-table2" data-toggle="tab">Table 2</a></li>
+					<li class="active">
+						<a href="#tab-table1" data-toggle="tab">Table 1</a>
+					</li>
+					<li>
+						<a href="#tab-table2" data-toggle="tab">Table 2</a>
+					</li>
 				</ul>
-
 				<div class="tab-content">
 					<div class="tab-pane active" id="tab-table1">
 						<table id="myTable1" class="table table-striped table-bordered" cellspacing="0" width="100%">
@@ -84,7 +81,6 @@ $(document).ready(function() {
 							</thead>
 						</table>
 					</div>
-
 					<div class="tab-pane" id="tab-table2">
 						<table id="myTable2" class="table table-striped table-bordered" cellspacing="0" width="100%">
 							<thead>
@@ -101,7 +97,6 @@ $(document).ready(function() {
 					</div>
 				</div>
 			</div>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -109,7 +104,6 @@ $(document).ready(function() {
 				<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() {
@@ -127,40 +121,45 @@ $(document).ready(function() {
 	// Apply a search to the second table for the demo
 	$('#myTable2').DataTable().search( 'New York' ).draw();
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.js</a></li>
-						<li><a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js</a></li>
-						<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
-						<li><a href="../../media/js/dataTables.bootstrap.js">../../media/js/dataTables.bootstrap.js</a></li>
+						<li>
+							<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/dataTables.bootstrap.js">../../media/js/dataTables.bootstrap.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css</a></li>
-						<li><a href="../../media/css/dataTables.bootstrap.css">../../media/css/dataTables.bootstrap.css</a></li>
+						<li>
+							<a href=
+							"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css</a>
+						</li>
+						<li>
+							<a href="../../media/css/dataTables.bootstrap.css">../../media/css/dataTables.bootstrap.css</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="ajax">
 					<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
 					loaded.</p>
 				</div>
-
 				<div class="php">
 					<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
 					processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
@@ -169,155 +168,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<li>
+								<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/ajax.html">Ajax sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/js_array.html">Javascript sourced data</a>
+							</li>
+							<li>
+								<a href="../data_sources/server_side.html">Server-side processing</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./index.html">API</a></h3>
 						<ul class="toc active">
-							<li><a href="./add_row.html">Add rows</a></li>
-							<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
-							<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
-							<li><a href="./highlight.html">Highlighting rows and columns</a></li>
-							<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
-							<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
-							<li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
-							<li><a href="./form.html">Form inputs</a></li>
-							<li><a href="./counter_columns.html">Index column</a></li>
-							<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
-							<li><a href="./api_in_init.html">Using API in callbacks</a></li>
-							<li class="active"><a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a></li>
-							<li><a href="./regex.html">Search API (regular expressions)</a></li>
+							<li>
+								<a href="./add_row.html">Add rows</a>
+							</li>
+							<li>
+								<a href="./multi_filter.html">Individual column searching (text inputs)</a>
+							</li>
+							<li>
+								<a href="./multi_filter_select.html">Individual column searching (select inputs)</a>
+							</li>
+							<li>
+								<a href="./highlight.html">Highlighting rows and columns</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Child rows (show extra / detailed information)</a>
+							</li>
+							<li>
+								<a href="./select_row.html">Row selection (multiple rows)</a>
+							</li>
+							<li>
+								<a href="./select_single_row.html">Row selection and deletion (single row)</a>
+							</li>
+							<li>
+								<a href="./form.html">Form inputs</a>
+							</li>
+							<li>
+								<a href="./counter_columns.html">Index column</a>
+							</li>
+							<li>
+								<a href="./show_hide.html">Show / hide columns dynamically</a>
+							</li>
+							<li>
+								<a href="./api_in_init.html">Using API in callbacks</a>
+							</li>
+							<li class="active">
+								<a href="./tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
+							</li>
+							<li>
+								<a href="./regex.html">Search API (regular expressions)</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../ajax/index.html">Ajax</a></h3>
 						<ul class="toc">
-							<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
-							<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
-							<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
-							<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
-							<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
-							<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
-							<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
-							<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
-							<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/alt_pagination.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Alternative pagination</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"pagingType": "full_numbers"
@@ -26,39 +25,33 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Alternative pagination</span></h1>
-
 			<div class="info">
 				<p>The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are
 				cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the <a href=
 				"//datatables.net/reference/option/pagingType"><code class="option" title="DataTables initialisation option">pagingType</code></a> option.</p>
-
-				<p>There are four built-in options for which pagination controls DataTables should show:</p>
-
+				<p>There are six built-in options for which pagination controls DataTables should show:</p>
 				<ul class="markdown">
 					<li><code class="string" title="String">numbers</code> - Page number buttons only</li>
 					<li><code class="string" title="String">simple</code> - 'Previous' and 'Next' buttons only</li>
 					<li><code class="string" title="String">simple_numbers</code> - 'Previous' and 'Next' buttons, plus page numbers</li>
 					<li><code class="string" title="String">full</code> - 'First', 'Previous', 'Next' and 'Last' buttons</li>
 					<li><code class="string" title="String">full_numbers</code> - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers</li>
+					<li><code class="string" title="String">first_last_numbers</code> - 'First' and 'Last' buttons, plus page numbers</li>
 				</ul>
-
-				<p>The language strings of 'First', 'Previous' etc can be optionally through the internationalisation options of DataTables; <a href=
+				<p>The language strings of 'First', 'Previous' etc can be optionally changed through the internationalisation options of DataTables; <a href=
 				"//datatables.net/reference/option/language.paginate.first"><code class="option" title="DataTables initialisation option">language.paginate.first</code></a>,
 				<a href="//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
 				"DataTables initialisation option">language.paginate.previous</code></a> etc.</p>
-
 				<p>Additional options for the buttons that are shown can be added through the use of pagination type plug-ins. Furthermore, how the buttons are actually shown can
 				be altered through the use of plug-in pagination renderers.</p>
-
 				<p>The example below shows the <code class="string" title="String">full_numbers</code> type of pagination.</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>
@@ -69,18 +62,6 @@ $(document).ready(function() {
 						<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>
@@ -539,8 +520,17 @@ $(document).ready(function() {
 						<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>
@@ -548,7 +538,6 @@ $(document).ready(function() {
 				<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() {
@@ -556,37 +545,35 @@ $(document).ready(function() {
 		&quot;pagingType&quot;: &quot;full_numbers&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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -595,155 +582,325 @@ $(document).ready(function() {
 			</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="./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>
+							<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="./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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/comma-decimal.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"language": {
@@ -29,31 +28,26 @@ $(document).ready(function() {
 
 	</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>&#9110;</code>) or a dash (<code>-</code>) are often used to show
-				the decimal place in a displayed number.</p>
-
+				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>
-
-			<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>
@@ -64,18 +58,6 @@ $(document).ready(function() {
 						<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>
@@ -534,8 +516,17 @@ $(document).ready(function() {
 						<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>
@@ -543,7 +534,6 @@ $(document).ready(function() {
 				<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() {
@@ -554,37 +544,35 @@ $(document).ready(function() {
 		}
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -593,155 +581,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="./index.html">Basic initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./zero_configuration.html">Zero configuration</a></li>
-							<li><a href="./filter_only.html">Feature enable / disable</a></li>
-							<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="./multiple_tables.html">Multiple tables</a></li>
-							<li><a href="./hidden_columns.html">Hidden columns</a></li>
-							<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li class="active"><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<li>
+								<a href="./zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="./filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="./table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li class="active">
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/complex_header.html

@@ -3,45 +3,40 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Complex headers (rowspan and colspan)</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable();
 } );
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Complex headers (rowspan and colspan)</span></h1>
-
 			<div class="info">
 				<p>When using tables to display data, you will often wish to display column information in groups. DataTables fully supports <code>colspan</code> and
 				<code>rowspan</code> in the table's header, assigning the required order listeners to the TH element suitable for that column.</p>
-
 				<p>Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to
 				attach the order listener, if more than one cell for a column if found. The <a href="//datatables.net/reference/option/orderCellsTop"><code class="option" title=
 				"DataTables initialisation option">orderCellsTop</code></a> option can be used to tell DataTables to use the top cell if you prefer.</p>
-
 				<p>The example shown below has two sets of grouped information, grouped by colspan in the header.</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 rowspan="2">Name</th>
@@ -56,18 +51,6 @@ $(document).ready(function() {
 						<th>E-mail</th>
 					</tr>
 				</thead>
-
-				<tfoot>
-					<tr>
-						<th>Name</th>
-						<th>Position</th>
-						<th>Salary</th>
-						<th>Office</th>
-						<th>Extn.</th>
-						<th>E-mail</th>
-					</tr>
-				</tfoot>
-
 				<tbody>
 					<tr>
 						<td>Tiger Nixon</td>
@@ -526,8 +509,17 @@ $(document).ready(function() {
 						<td>d.snider@datatables.net</td>
 					</tr>
 				</tbody>
+				<tfoot>
+					<tr>
+						<th>Name</th>
+						<th>Position</th>
+						<th>Salary</th>
+						<th>Office</th>
+						<th>Extn.</th>
+						<th>E-mail</th>
+					</tr>
+				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -535,43 +527,40 @@ $(document).ready(function() {
 				<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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -580,155 +569,325 @@ $(document).ready(function() {
 			</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 class="active"><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<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 class="active">
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/dom.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - DOM positioning</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"dom": '<"top"i>rt<"bottom"flp><"clear">'
@@ -26,25 +25,20 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>DOM positioning</span></h1>
-
 			<div class="info">
 				<p>When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking.
 				To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the <a href=
 				"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> initialisation parameter which can be set to
 				indicate where you wish particular features to appear in the DOM. You can also specify <code>div</code> wrapping containers (with an id and / or class) to provide
 				complete layout flexibility.</p>
-
 				<p>Each HTML control element presented by DataTables is denoted by a single character in the <a href="//datatables.net/reference/option/dom"><code class="option"
 				title="DataTables initialisation option">dom</code></a> option. For example the <code>l</code> option is used for the <code>L</code>ength changing input
 				option.</p>
-
 				<p>The built-in options available are:</p>
-
 				<ul class="markdown">
 					<li><code>l</code> - <code>L</code>ength changing</li>
 					<li><code>f</code> - <code>F</code>iltering input</li>
@@ -57,34 +51,23 @@ $(document).ready(function() {
 					<li><code>&lt;"class"</code> and <code>&gt;</code> - div with a class</li>
 					<li><code>&lt;"#id.class"</code> and <code>&gt;</code> - div with an id and class</li>
 				</ul>
-
 				<p>Example 1:</p>
-				<pre>
-<code class="multiline">&lt;"wrapper"flipt&gt;
-</code>
-</pre>
-
+				<pre><code class="multiline">&lt;"wrapper"flipt&gt;
+</code></pre>
 				<p>This results in the following DOM structure:</p>
-				<pre>
-<code class="multiline">&lt;div class="wrapper"&gt;
+				<pre><code class="multiline">&lt;div class="wrapper"&gt;
 	{ filter }
 	{ length }
 	{ info }
 	{ paging }
 	{ table }
 &lt;/div&gt;
-</code>
-</pre>
-
+</code></pre>
 				<p>Example 2:</p>
-				<pre>
-<code class="multiline">&lt;lf&lt;t&gt;ip&gt;
-</code>
-</pre>
-
+				<pre><code class="multiline">&lt;lf&lt;t&gt;ip&gt;
+</code></pre>
 				<p>This results in the following DOM structure:</p>
-				<pre>
-<code class="multiline">&lt;div&gt;
+				<pre><code class="multiline">&lt;div&gt;
 	{ length }
 	{ filter }
 	&lt;div&gt;
@@ -93,20 +76,16 @@ $(document).ready(function() {
 	{ info }
 	{ paging }
 &lt;/div&gt;
-</code>
-</pre>
-
+</code></pre>
 				<p>All options (with the exception of the <code>t</code> (table) option can be specified multiple times, for if you want to show the same control multiple times
 				(pagination at the top and bottom of the table for example).</p>
-
 				<p>Furthermore, note that additional <a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a>
-				options can be added to DataTables through the use of plug-ins.</p>
-
+				options can be added to DataTables <a href="https://datatables.net/manual/plug-ins/features">through the use of plug-ins</a>.</p>
 				<p>In the example below, the table information is moved to the top of the table, and all the interaction elements to the bottom, each wrapper in a container
 				<code>div</code>.</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>
@@ -117,18 +96,6 @@ $(document).ready(function() {
 						<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>
@@ -587,8 +554,17 @@ $(document).ready(function() {
 						<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>
@@ -596,7 +572,6 @@ $(document).ready(function() {
 				<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() {
@@ -604,37 +579,35 @@ $(document).ready(function() {
 		&quot;dom&quot;: '&lt;&quot;top&quot;i&gt;rt&lt;&quot;bottom&quot;flp&gt;&lt;&quot;clear&quot;&gt;'
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -643,155 +616,325 @@ $(document).ready(function() {
 			</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 class="active"><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<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 class="active">
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/filter_only.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Feature enable / disable</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"paging":   false,
@@ -28,18 +27,17 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Feature enable / disable</span></h1>
-
 			<div class="info">
-				<p>Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. In the following example
-				only the filter feature is left enabled (which is enabled by default).</p>
+				<p>Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. The full list of
+				available options is <a href="https://datatables.net/reference/option">available in the DataTables reference</a>.</p>
+				<p>In the following example only the search feature is left enabled (which it is by 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>
@@ -50,18 +48,6 @@ $(document).ready(function() {
 						<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>
@@ -520,8 +506,17 @@ $(document).ready(function() {
 						<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>
@@ -529,7 +524,6 @@ $(document).ready(function() {
 				<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() {
@@ -539,37 +533,35 @@ $(document).ready(function() {
 		&quot;info&quot;:     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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -578,155 +570,325 @@ $(document).ready(function() {
 			</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 class="active"><a href="./filter_only.html">Feature enable / disable</a></li>
-							<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="./multiple_tables.html">Multiple tables</a></li>
-							<li><a href="./hidden_columns.html">Hidden columns</a></li>
-							<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<li>
+								<a href="./zero_configuration.html">Zero configuration</a>
+							</li>
+							<li class="active">
+								<a href="./filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="./table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/flexible_width.html

@@ -3,48 +3,44 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Flexible table width</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.container {
 		width: 80%;
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable();
 } );
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Flexible table width</span></h1>
-
 			<div class="info">
 				<p>Often you may want to have your table resize dynamically with the page. Typically this is done by assigning <code>width:100%</code> in your CSS, but this
 				presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the <code>width</code>
 				attribute to the HTML table tag or inline width style (<code>style="width:100%"</code>), it will be used as the width for the table (overruling any CSS
 				styles).</p>
-
-				<p>This example shows a table with <code>width="100%"</code> and the container is also flexible width, so as the window is resized, the table will also resize
+				<p>This example shows a table with <code>width="80%"</code> and the container is also flexible width, so as the window is resized, the table will also resize
 				dynamically.</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>
@@ -55,18 +51,6 @@ $(document).ready(function() {
 						<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>
@@ -525,8 +509,17 @@ $(document).ready(function() {
 						<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>
@@ -534,25 +527,24 @@ $(document).ready(function() {
 				<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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
@@ -560,19 +552,17 @@ $(document).ready(function() {
 		width: 80%;
 	}</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="../../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
@@ -581,155 +571,325 @@ $(document).ready(function() {
 			</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 class="active"><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<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 class="active">
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/hidden_columns.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Hidden columns</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"columnDefs": [ 
@@ -36,28 +35,23 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Hidden columns</span></h1>
-
 			<div class="info">
 				<p>There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want
 				to reduce the amount of data shown on screen to make it clearer for the user (consider also using the <a href=
 				"https://datatables.net/extensions/responsive">Responsive extension</a> for this). This is done through the <a href=
 				"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a> column option.</p>
-
 				<p>The column that is hidden is still part of the table and can be made visible through the <code>api column().visible()</code> API method at a future time if you
 				wish to have columns which can be shown and hidden.</p>
-
 				<p>Furthermore, as the hidden data is still part of the table, it can still, optionally, be filtered upon allowing the user access to that data (for example 'tag'
 				information for a row entry might used).</p>
-
 				<p>In the table below both the office and age version columns have been hidden, the former is not searchable, the latter is.</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>
@@ -68,18 +62,6 @@ $(document).ready(function() {
 						<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>
@@ -538,8 +520,17 @@ $(document).ready(function() {
 						<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>
@@ -547,7 +538,6 @@ $(document).ready(function() {
 				<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() {
@@ -565,37 +555,35 @@ $(document).ready(function() {
 		]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -604,155 +592,325 @@ $(document).ready(function() {
 			</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 class="active"><a href="./hidden_columns.html">Hidden columns</a></li>
-							<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<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 class="active">
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/index.html

@@ -3,64 +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="initial-scale=1.0, maximum-scale=2.0">
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
-
 	<title>DataTables examples - Basic initialisation</title>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Basic initialisation</span></h1>
-
 			<div class="info">
-				<p>DataTables is 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
+				<p>DataTables is a simple-to-use jQuery plug-in with a huge range of customisable options. The examples in this section demonstrate basic initialisation of
 				DataTables and how it can be easily customised by passing an object with the options you want.</p>
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="./index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="./zero_configuration.html">Zero configuration</a></li>
-							<li><a href="./filter_only.html">Feature enable / disable</a></li>
-							<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="./multiple_tables.html">Multiple tables</a></li>
-							<li><a href="./hidden_columns.html">Hidden columns</a></li>
-							<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<li>
+								<a href="./zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="./filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="./table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
 				</div>
-
 				<div class="epilogue">
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/language.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Language 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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"language": {
@@ -32,20 +31,17 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Language options</span></h1>
-
 			<div class="info">
 				<p>Changing the language information displayed by DataTables is as simple as passing in a <a href="//datatables.net/reference/option/language"><code class="option"
 				title="DataTables initialisation option">language</code></a> object to the DataTable constructor.</p>
-
-				<p>The example above shows a different set of English string being used, rather than the defaults.</p>
+				<p>This example shows a different set of English string being used, rather than the defaults.</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>
@@ -56,18 +52,6 @@ $(document).ready(function() {
 						<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>
@@ -526,8 +510,17 @@ $(document).ready(function() {
 						<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>
@@ -535,7 +528,6 @@ $(document).ready(function() {
 				<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() {
@@ -549,37 +541,35 @@ $(document).ready(function() {
 		}
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -588,155 +578,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="./index.html">Basic initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./zero_configuration.html">Zero configuration</a></li>
-							<li><a href="./filter_only.html">Feature enable / disable</a></li>
-							<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="./multiple_tables.html">Multiple tables</a></li>
-							<li><a href="./hidden_columns.html">Hidden columns</a></li>
-							<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li class="active"><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="./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 class="active">
+								<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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/multi_col_sort.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Multi-column ordering</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -36,32 +35,30 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Multi-column ordering</span></h1>
-
 			<div class="info">
 				<p>DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways:</p>
-
 				<ul class="markdown">
 					<li>User shift click on a column (added the clicked column as a secondary, tertiary etc ordering column).</li>
 					<li>On a per-column basis (i.e. order by a specific column and then a secondary column if the data in the first column is identical), through the <a href=
-					"//datatables.net/reference/option/columns.orderData"><code class="option" title="DataTables initialisation option">columns.orderData</code></a> option.</li>
+					"//datatables.net/reference/option/columns.orderData"><code class="option" title="DataTables initialisation option">columns.orderData</code></a> option.
+					</li>
 					<li>Using the <a href="//datatables.net/reference/option/columns.orderData"><code class="option" title=
-					"DataTables initialisation option">columns.orderData</code></a> option to specify a multiple column order by default (for example <code>[ 0, 1 ]</code>).</li>
-					<li>Through the <a href="//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()</code></a> API method.</li>
+					"DataTables initialisation option">columns.orderData</code></a> option to specify a multiple column order by default (for example <code>[ 0, 1 ]</code>).
+					</li>
+					<li>Through the <a href="//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()</code></a> API method.
+					</li>
 				</ul>
-
 				<p>Note that, the ability for the user to shift click to order multiple columns can be disabled through the <a href=
 				"//datatables.net/reference/option/orderMulti"><code class="option" title="DataTables initialisation option">orderMulti</code></a> option.</p>
-
 				<p>The example below shows the first column having a secondary order applied to the second column in the table, vice-versa for the second column being tied
 				directly to the first and the salary column to the first name column.</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>First name</th>
@@ -71,7 +68,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tbody>
 					<tr>
 						<td>Tiger</td>
@@ -474,7 +470,6 @@ $(document).ready(function() {
 					</tr>
 				</tbody>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -482,7 +477,6 @@ $(document).ready(function() {
 				<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() {
@@ -499,37 +493,35 @@ $(document).ready(function() {
 		} ]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -538,155 +530,325 @@ $(document).ready(function() {
 			</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 class="active"><a href="./multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="./multiple_tables.html">Multiple tables</a></li>
-							<li><a href="./hidden_columns.html">Hidden columns</a></li>
-							<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<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 class="active">
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/multiple_tables.html

@@ -3,50 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('table.display').DataTable();
 } );
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<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>
 			</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>
@@ -56,17 +51,6 @@ $(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>
@@ -132,19 +116,6 @@ $(document).ready(function() {
 						<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>
@@ -154,7 +125,17 @@ $(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>
@@ -241,8 +222,16 @@ $(document).ready(function() {
 						<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>
@@ -250,25 +239,24 @@ $(document).ready(function() {
 				<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() {
 	$('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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
@@ -276,19 +264,17 @@ $(document).ready(function() {
 		margin-bottom: 3em;
 	}</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="../../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
@@ -297,155 +283,325 @@ $(document).ready(function() {
 			</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 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_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>
+							<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_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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/scroll_x.html

@@ -3,26 +3,25 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Scroll - horizontal</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 {
 		width: 800px;
 		margin: 0 auto;
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"scrollX": true
@@ -31,23 +30,20 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Scroll - horizontal</span></h1>
-
 			<div class="info">
 				<p>DataTables has the ability to show tables with horizontal scrolling, which is very useful for when you have a wide table, but want to constrain it to a limited
 				horizontal display area. To enable x-scrolling simply set the <a href="//datatables.net/reference/option/scrollX"><code class="option" title=
 				"DataTables initialisation option">scrollX</code></a> parameter to be whatever you want the container wrapper's width to be (this should be 100% in almost all
 				cases with the width being constrained by the container element).</p>
-
 				<p>The example below shows a table too wide for the containing element with x-scrolling enabled. The CSS option of <code>th, td { white-space: nowrap; }</code> is
 				also set to have the text content of each row on a single line (otherwise the browser will line break the text to have it fit into the available area).</p>
 			</div>
-
-			<table id="example" class="display nowrap" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display nowrap" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
@@ -61,7 +57,6 @@ $(document).ready(function() {
 						<th>E-mail</th>
 					</tr>
 				</thead>
-
 				<tbody>
 					<tr>
 						<td>Tiger</td>
@@ -692,7 +687,6 @@ $(document).ready(function() {
 					</tr>
 				</tbody>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -700,7 +694,6 @@ $(document).ready(function() {
 				<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() {
@@ -708,19 +701,19 @@ $(document).ready(function() {
 		&quot;scrollX&quot;: true
 	} );
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
@@ -729,19 +722,17 @@ $(document).ready(function() {
 		margin: 0 auto;
 	}</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="../../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
@@ -750,155 +741,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="./index.html">Basic initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./zero_configuration.html">Zero configuration</a></li>
-							<li><a href="./filter_only.html">Feature enable / disable</a></li>
-							<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="./multiple_tables.html">Multiple tables</a></li>
-							<li><a href="./hidden_columns.html">Hidden columns</a></li>
-							<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li class="active"><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>
+							<li>
+								<a href="./zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="./filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="./table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li class="active">
+								<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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/scroll_xy.html

@@ -3,26 +3,25 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Scroll - horizontal and vertical</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 {
 		width: 800px;
 		margin: 0 auto;
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"scrollY": 200,
@@ -32,18 +31,16 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Scroll - horizontal and vertical</span></h1>
-
 			<div class="info">
 				<p>In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and
 				the scrolling accounts for this.</p>
 			</div>
-
-			<table id="example" class="display nowrap" cellspacing="0" width="100%">
+			<div class="demo-html"></div>
+			<table id="example" class="display nowrap" style="width:100%">
 				<thead>
 					<tr>
 						<th>First name</th>
@@ -57,7 +54,6 @@ $(document).ready(function() {
 						<th>E-mail</th>
 					</tr>
 				</thead>
-
 				<tbody>
 					<tr>
 						<td>Tiger</td>
@@ -688,7 +684,6 @@ $(document).ready(function() {
 					</tr>
 				</tbody>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -696,7 +691,6 @@ $(document).ready(function() {
 				<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() {
@@ -705,19 +699,19 @@ $(document).ready(function() {
 		&quot;scrollX&quot;: true
 	} );
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
@@ -726,19 +720,17 @@ $(document).ready(function() {
 		margin: 0 auto;
 	}</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="../../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
@@ -747,155 +739,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="./index.html">Basic initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./zero_configuration.html">Zero configuration</a></li>
-							<li><a href="./filter_only.html">Feature enable / disable</a></li>
-							<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="./multiple_tables.html">Multiple tables</a></li>
-							<li><a href="./hidden_columns.html">Hidden columns</a></li>
-							<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li class="active"><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>
+							<li>
+								<a href="./zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="./filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="./table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li class="active">
+								<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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/scroll_y.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Scroll - vertical</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"scrollY":        "200px",
@@ -28,28 +27,24 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Scroll - vertical</span></h1>
-
 			<div class="info">
 				<p>This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for
 				displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine
 				with pagination enabled as well!).</p>
-
 				<p>To enable y-scrolling simply set the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
 				"DataTables initialisation option">scrollY</code></a> parameter to be whatever you want the container wrapper's height to be (any CSS measurement is acceptable, or
 				just a number which is treated as pixels).</p>
-
 				<p>Note also that the <a href="//datatables.net/reference/option/scrollCollapse"><code class="option" title=
 				"DataTables initialisation option">scrollCollapse</code></a> option is enabled in this example. This will have the container match the height of the rows shown in
 				the table if that height is smaller than that given height by the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
 				"DataTables initialisation option">scrollY</code></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>
@@ -60,18 +55,6 @@ $(document).ready(function() {
 						<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>
@@ -530,8 +513,17 @@ $(document).ready(function() {
 						<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>
@@ -539,7 +531,6 @@ $(document).ready(function() {
 				<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() {
@@ -549,37 +540,35 @@ $(document).ready(function() {
 		&quot;paging&quot;:         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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -588,155 +577,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="./index.html">Basic initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./zero_configuration.html">Zero configuration</a></li>
-							<li><a href="./filter_only.html">Feature enable / disable</a></li>
-							<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="./multiple_tables.html">Multiple tables</a></li>
-							<li><a href="./hidden_columns.html">Hidden columns</a></li>
-							<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li class="active"><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>
+							<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 class="active">
+								<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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/scroll_y_dynamic.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		scrollY:        '50vh',
@@ -28,23 +27,20 @@ $(document).ready(function() {
 
 	</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>
-
-			<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>
@@ -55,18 +51,6 @@ $(document).ready(function() {
 						<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>
@@ -525,8 +509,17 @@ $(document).ready(function() {
 						<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>
@@ -534,7 +527,6 @@ $(document).ready(function() {
 				<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() {
@@ -544,37 +536,35 @@ $(document).ready(function() {
 		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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -583,155 +573,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="./index.html">Basic initialisation</a></h3>
 						<ul class="toc active">
-							<li><a href="./zero_configuration.html">Zero configuration</a></li>
-							<li><a href="./filter_only.html">Feature enable / disable</a></li>
-							<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="./multiple_tables.html">Multiple tables</a></li>
-							<li><a href="./hidden_columns.html">Hidden columns</a></li>
-							<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li class="active"><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<li>
+								<a href="./zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="./filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="./table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li class="active">
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/state_save.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - State saving</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		stateSave: true
@@ -26,32 +25,27 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>State saving</span></h1>
-
 			<div class="info">
 				<p>DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user reloads
 				a page, or comes back to the page after visiting a sub-page. This state saving ability is enabled by the <a href=
 				"//datatables.net/reference/option/stateSave"><code class="option" title="DataTables initialisation option">stateSave</code></a> option.</p>
-
 				<p>The built in state saving method uses the HTML5 <code>localStorage</code> and <code>sessionStorage</code> APIs for efficient storage of the data. Please note
 				that this means that the built in state saving option <strong>will not work with IE6/7</strong> as these browsers do not support these APIs. Alternative options of
 				using cookies or saving the state on the server through Ajax can be used through the <a href="//datatables.net/reference/option/stateSaveCallback"><code class=
 				"option" title="DataTables initialisation option">stateSaveCallback</code></a> and <a href="//datatables.net/reference/option/stateLoadCallback"><code class=
 				"option" title="DataTables initialisation option">stateLoadCallback</code></a> options.</p>
-
 				<p>The duration for which the saved state is valid and can be used to restore the table state can be set using the <a href=
 				"//datatables.net/reference/option/stateDuration"><code class="option" title="DataTables initialisation option">stateDuration</code></a> initialisation parameter
 				(2 hours by default). This parameter also controls if <code>localStorage</code> (0 or greater) or <code>sessionStorage</code> (-1) is used to store the data.</p>
-
 				<p>The example below simply shows state saving enabled in DataTables with the <a href="//datatables.net/reference/option/stateSave"><code class="option" title=
 				"DataTables initialisation option">stateSave</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>
@@ -62,18 +56,6 @@ $(document).ready(function() {
 						<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>
@@ -532,8 +514,17 @@ $(document).ready(function() {
 						<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>
@@ -541,7 +532,6 @@ $(document).ready(function() {
 				<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() {
@@ -549,37 +539,35 @@ $(document).ready(function() {
 		stateSave: true
 	} );
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -588,155 +576,325 @@ $(document).ready(function() {
 			</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 class="active"><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<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 class="active">
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/table_sorting.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Default ordering (sorting)</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"order": [[ 3, "desc" ]]
@@ -26,26 +25,22 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Default ordering (sorting)</span></h1>
-
 			<div class="info">
 				<p>With DataTables you can alter the ordering characteristics of the table at initialisation time. Using the <a href=
 				"//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order</code></a> initialisation parameter, you can set the
 				table to display the data in exactly the order that you want.</p>
-
 				<p>The <a href="//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order</code></a> parameter is an array of
 				arrays where the first value of the inner array is the column to order on, and the second is <code class="string" title="String">'asc'</code> (ascending ordering)
 				or <code class="string" title="String">'desc'</code> (descending ordering) as required. <a href="//datatables.net/reference/option/order"><code class="option"
 				title="DataTables initialisation option">order</code></a> is a 2D array to allow multi-column ordering to be defined.</p>
-
 				<p>The table below is ordered (descending) by the Age column.</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>
@@ -56,18 +51,6 @@ $(document).ready(function() {
 						<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>
@@ -526,8 +509,17 @@ $(document).ready(function() {
 						<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>
@@ -535,7 +527,6 @@ $(document).ready(function() {
 				<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() {
@@ -543,37 +534,35 @@ $(document).ready(function() {
 		&quot;order&quot;: [[ 3, &quot;desc&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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -582,155 +571,325 @@ $(document).ready(function() {
 			</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 class="active"><a href="./table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="./multiple_tables.html">Multiple tables</a></li>
-							<li><a href="./hidden_columns.html">Hidden columns</a></li>
-							<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<li>
+								<a href="./zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="./filter_only.html">Feature enable / disable</a>
+							</li>
+							<li class="active">
+								<a href="./table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/zero_configuration.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Zero configuration</title>
 	<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
 	<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
 	<link rel="stylesheet" type="text/css" href="../resources/demo.css">
 	<style type="text/css" class="init">
-
+	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable();
@@ -26,20 +25,17 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Zero configuration</span></h1>
-
 			<div class="info">
 				<p>DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function:
 				<code>$().DataTable();</code>.</p>
-
 				<p>Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.</p>
 			</div>
-
-			<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>
@@ -50,18 +46,6 @@ $(document).ready(function() {
 						<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>
@@ -520,8 +504,17 @@ $(document).ready(function() {
 						<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>
@@ -529,43 +522,40 @@ $(document).ready(function() {
 				<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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -574,155 +564,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="./index.html">Basic initialisation</a></h3>
 						<ul class="toc active">
-							<li class="active"><a href="./zero_configuration.html">Zero configuration</a></li>
-							<li><a href="./filter_only.html">Feature enable / disable</a></li>
-							<li><a href="./table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="./multiple_tables.html">Multiple tables</a></li>
-							<li><a href="./hidden_columns.html">Hidden columns</a></li>
-							<li><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="./dom.html">DOM positioning</a></li>
-							<li><a href="./flexible_width.html">Flexible table width</a></li>
-							<li><a href="./state_save.html">State saving</a></li>
-							<li><a href="./alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="./scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="./language.html">Language options</a></li>
+							<li class="active">
+								<a href="./zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="./filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="./table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/data_sources/ajax.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -28,26 +27,22 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Ajax sourced data</span></h1>
-
 			<div class="info">
 				<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting
 				the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option to the address of the
 				JSON data source.</p>
-
 				<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option also allows for more
 				advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
 				"DataTables initialisation option">ajax</code></a> documentation and the <a href="../ajax">other Ajax examples</a> for further information.</p>
-
 				<p>The example below shows DataTables loading data for a table from arrays as the data source (object parameters can also be used through the <a href=
 				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option ).</p>
 			</div>
-
-			<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>
@@ -58,7 +53,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>Name</th>
@@ -70,7 +64,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -78,7 +71,6 @@ $(document).ready(function() {
 				<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() {
@@ -86,37 +78,35 @@ $(document).ready(function() {
 		&quot;ajax&quot;: '../ajax/data/arrays.txt'
 	} );
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -125,155 +115,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<ul class="toc active">
-							<li><a href="./dom.html">HTML (DOM) sourced data</a></li>
-							<li class="active"><a href="./ajax.html">Ajax sourced data</a></li>
-							<li><a href="./js_array.html">Javascript sourced data</a></li>
-							<li><a href="./server_side.html">Server-side processing</a></li>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/data_sources/dom.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - HTML (DOM) 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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable();
@@ -26,21 +25,18 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>HTML (DOM) sourced data</span></h1>
-
 			<div class="info">
 				<p>The foundation for DataTables is progressive enhancement, so it is very adept at reading table information directly from the DOM. This example shows how easy it
 				is to add searching, ordering and paging to your HTML table by simply running DataTables on it.</p>
-
 				<p>For further and more complex examples of using DataTables with DOM sourced data, please refer to the <a href="../basic_init">basic initialisation</a> and
-				<a href="../advanced_init">advanced</a> examples.</p>
+				<a href="../advanced_init">advanced initialisation</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>
@@ -51,18 +47,6 @@ $(document).ready(function() {
 						<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>
@@ -521,8 +505,17 @@ $(document).ready(function() {
 						<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>
@@ -530,43 +523,40 @@ $(document).ready(function() {
 				<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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -575,155 +565,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<ul class="toc active">
-							<li class="active"><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>
+							<li class="active">
+								<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 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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/data_sources/index.html

@@ -3,60 +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="initial-scale=1.0, maximum-scale=2.0">
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
-
 	<title>DataTables examples - Data sources</title>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Data sources</span></h1>
-
 			<div class="info">
 				<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>Which of these options is used to populate the table with data depends upon how the table is initialised. The examples in this section show these four different
-				data source types.</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>
 						<ul class="toc">
-							<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>
+							<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/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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/data_sources/js_array.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 var dataSet = [
     [ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
@@ -75,26 +74,22 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<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/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 class="demo-html"></div>
 			<table id="example" class="display" width="100%"></table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -102,7 +97,6 @@ $(document).ready(function() {
 				<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">var dataSet = [
@@ -157,37 +151,35 @@ $(document).ready(function() {
 		]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -196,155 +188,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<ul class="toc active">
-							<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/data_sources/server_side.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"processing": true,
@@ -28,27 +27,23 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<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/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>First name</th>
@@ -59,7 +54,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>First name</th>
@@ -71,7 +65,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -79,7 +72,6 @@ $(document).ready(function() {
 				<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() {
@@ -89,37 +81,35 @@ $(document).ready(function() {
 		&quot;ajax&quot;: &quot;../server_side/scripts/server_processing.php&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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -128,155 +118,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<ul class="toc active">
-							<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/index.html

@@ -3,21 +3,18 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="./resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="./resources/demo.js"></script>
-
 	<title>DataTables examples - 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
@@ -25,153 +22,324 @@
 			</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/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>
+							<li>
+								<a href="./basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="./basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="./basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="./basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="./basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="./basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="./basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="./basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="./basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="./basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="./basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="./basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="./basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="./basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="./basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="./basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="./basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="./advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="./advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="./advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="./advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="./advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="./advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="./advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="./advanced_init/html5-data-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>
+							<li>
+								<a href="./advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="./advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="./advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="./advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="./advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="./advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="./advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="./advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="./advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="./advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="./advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="./advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="./advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="./advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="./advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="./advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="./styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="./styling/display.html">Base style</a></li>
-							<li><a href="./styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="./styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="./styling/compact.html">Base style - compact</a></li>
-							<li><a href="./styling/hover.html">Base style - hover</a></li>
-							<li><a href="./styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="./styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="./styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="./styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="./styling/foundation.html">Foundation</a></li>
-							<li><a href="./styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/plug-ins/api.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - API plug-in methods</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $.fn.dataTable.Api.register( 'column().data().sum()', function () {
 	return this.reduce( function (a, b) {
@@ -47,26 +46,23 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>API plug-in methods</span></h1>
-
 			<div class="info">
 				<p>The DataTables API is designed to be fully extensible, with custom functions being very easy to add using the <code>$.fn.dataTable.Api.register</code> function.
 				This function takes two arguments; the first being the name of the method to be added and its chaining hierarchy, and the second the function itself.</p>
-
-				<p>This example shows how a <code>sum()</code> method can easily be added to the Api so you can get the sum of a column in a single line:
+				<p>This example shows how a <code>sum()</code> method can easily be added to the API so you can get the sum of a column in a single line:
 				<code>table.column().data().sum()</code>. Due to the chaining of the methods, this allows <code>sum()</code> to very easily give the sum for any selected column,
 				and to limit the sum to just the current page, filtered data or all pages. This is done using the options for the <a href=
 				"//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()</code></a> method and the options for its selectors.</p>
-
 				<p>For more information about API plug-ins; creating them and their requirements, please refer to the plug-in development documentation.</p>
 			</div>
-			<div id="demo">
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html">
+				<div id="demo"></div>
+			</div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -77,18 +73,6 @@ $(document).ready(function() {
 						<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>
@@ -547,8 +531,17 @@ $(document).ready(function() {
 						<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>
@@ -556,7 +549,6 @@ $(document).ready(function() {
 				<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">$.fn.dataTable.Api.register( 'column().data().sum()', function () {
@@ -583,37 +575,35 @@ $(document).ready(function() {
 			alert( 'Column sum is: '+ table.column( 3, {page:'current'} ).data().sum() );
 		} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -622,155 +612,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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">Plug-ins</a></h3>
 						<ul class="toc active">
-							<li class="active"><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>
+							<li class="active">
+								<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/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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/plug-ins/index.html

@@ -3,55 +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="initial-scale=1.0, maximum-scale=2.0">
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
-
 	<title>DataTables examples - Plug-ins</title>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<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>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 search</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/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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/plug-ins/range_filtering.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Custom filtering - range search</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 /* Custom filtering function which will search data in column four between two values */
 $.fn.dataTable.ext.search.push(
@@ -49,32 +48,29 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Custom filtering - range search</span></h1>
-
 			<div class="info">
-				<p>There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range search (in between two
-				numbers) and date range search. DataTables provide an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is an array of
+				<p>There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range searches (in between two
+				numbers) and date range searches. DataTables provides an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is an array of
 				functions (push your own onto it) which will will be run at table draw time to see if a particular row should be included or not.</p>
-
 				<p>This example shows a search being performed on the age column in the data, based upon two inputs.</p>
 			</div>
-
-			<table border="0" cellspacing="5" cellpadding="5">
-				<tr>
-					<td>Minimum age:</td>
-					<td><input type="text" id="min" name="min"></td>
-				</tr>
-				<tr>
-					<td>Maximum age:</td>
-					<td><input type="text" id="max" name="max"></td>
-				</tr>
-			</table>
-
-			<table id="example" class="display" cellspacing="0" width="100%">
+			<div class="demo-html">
+				<table border="0" cellspacing="5" cellpadding="5">
+					<tr>
+						<td>Minimum age:</td>
+						<td><input type="text" id="min" name="min"></td>
+					</tr>
+					<tr>
+						<td>Maximum age:</td>
+						<td><input type="text" id="max" name="max"></td>
+					</tr>
+				</table>
+			</div>
+			<table id="example" class="display" style="width:100%">
 				<thead>
 					<tr>
 						<th>Name</th>
@@ -85,18 +81,6 @@ $(document).ready(function() {
 						<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>
@@ -555,8 +539,17 @@ $(document).ready(function() {
 						<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>
@@ -564,7 +557,6 @@ $(document).ready(function() {
 				<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">/* Custom filtering function which will search data in column four between two values */
@@ -593,37 +585,35 @@ $(document).ready(function() {
 		table.draw();
 	} );
 } );</code>
-
 					<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
-
 					<ul>
-						<li><a href="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -632,155 +622,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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">Plug-ins</a></h3>
 						<ul class="toc active">
-							<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 class="active"><a href="./range_filtering.html">Custom filtering - range search</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 class="active">
+								<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/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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/plug-ins/sorting_auto.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Ordering plug-ins (with type detection)</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $.fn.dataTable.ext.type.detect.unshift(
 	function ( d ) {
@@ -44,26 +43,20 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Ordering plug-ins (with type detection)</span></h1>
-
 			<div class="info">
-				<p>Although DataTables will automatically order data from a number of different data types using the built in methods, When dealing with more complex formatted
-				data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any manner you wish.</p>
-
+				<p>Although DataTables will automatically order data from a number of different data types using the built in methods, when dealing with more complex formatted
+				data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you can have DataTables sort data in any manner you wish.</p>
 				<p>Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in assigned to it by making use of DataTables' plug-in type
-				detection abilities. For complete information about type detection and ordering plug-ins; creating them and their requirements, please refer to the plug-in
-				development documentation.</p>
-
+				detection abilities. For more information about ordering plug-ins, creating them and their requirements, please refer to the plug-in development documentation.</p>
 				<p>This example shows ordering with using an enumerated type.</p>
-
 				<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</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>
@@ -74,18 +67,6 @@ $(document).ready(function() {
 						<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>
@@ -544,8 +525,17 @@ $(document).ready(function() {
 						<td>Low</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>
@@ -553,7 +543,6 @@ $(document).ready(function() {
 				<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">$.fn.dataTable.ext.type.detect.unshift(
@@ -577,37 +566,35 @@ $.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
 $(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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -616,155 +603,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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">Plug-ins</a></h3>
 						<ul class="toc active">
-							<li><a href="./api.html">API plug-in methods</a></li>
-							<li class="active"><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>
+							<li>
+								<a href="./api.html">API plug-in methods</a>
+							</li>
+							<li class="active">
+								<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/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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/plug-ins/sorting_manual.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Ordering plug-ins (no type detection)</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
 	switch ( d ) {
@@ -40,28 +39,23 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Ordering plug-ins (no type detection)</span></h1>
-
 			<div class="info">
-				<p>Although DataTables will order a number of data types using the built in methods, When dealing with more complex formatted data, it can be desirable to define
-				the ordering order yourself. Using plug-in ordering functions, you have have DataTables order data in any manner you wish.</p>
-
+				<p>Although DataTables will order a number of data types using the built in methods, when dealing with more complex formatted data, it can be desirable to define
+				the ordering order yourself. Using plug-in ordering functions, you can have DataTables order data in any manner you wish.</p>
 				<p>This is done by using the <a href="//datatables.net/reference/option/columns.type"><code class="option" title=
-				"DataTables initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can be be of any level of
+				"DataTables initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can be of any level of
 				complexity (natural ordering for example can be fairly complex while also very powerful), and is defined by attaching to the
-				<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins; creating them and their requirements, please refer to the plug-in
+				<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins, creating them and their requirements, please refer to the plug-in
 				development documentation.</p>
-
 				<p>This example shows ordering with using an enumerated type.</p>
-
 				<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</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>
@@ -72,18 +66,6 @@ $(document).ready(function() {
 						<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>
@@ -542,8 +524,17 @@ $(document).ready(function() {
 						<td>Low</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>
@@ -551,7 +542,6 @@ $(document).ready(function() {
 				<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">$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
@@ -571,37 +561,35 @@ $(document).ready(function() {
 		} ]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -610,155 +598,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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>
+							<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">Plug-ins</a></h3>
 						<ul class="toc active">
-							<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 class="active"><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>
+							<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 class="active">
+								<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/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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/resources/demo.css

@@ -1,5 +1,5 @@
 
-@import url(http://fonts.googleapis.com/css?family=Raleway:100);
+@import url(https://fonts.googleapis.com/css?family=Raleway:100);
 
 body {
 	font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Arial, Helvetica, sans-serif;

examples/resources/demo.js

@@ -28,9 +28,15 @@ if ( window.$ ) {
 
 		// init html
 		var table = $('<p/>').append( $('table').clone() ).html();
+		var demoHtml = $.trim( $('div.demo-html').html() );
+
+		if ( demoHtml ) {
+			demoHtml = demoHtml+'\n\n';
+		}
+
 		$('div.tabs div.table').append(
 			'<code class="multiline language-html">\t\t\t'+
-				escapeHtml( table )+
+				escapeHtml( demoHtml + table )+
 			'</code>'
 		);
 		//SyntaxHighlighter.highlight({}, $('#display-init-html')[0]);
@@ -58,7 +64,7 @@ if ( window.$ ) {
 					} catch ( e ) {}
 
 					$('div.tabs div.ajax').append(
-						'<code class="multiline language-js">'+str+'</code>'
+						$('<code class="multiline language-js"/>').text( str )
 					);
 
 					// This can be really slow for large builds
@@ -88,7 +94,7 @@ if ( window.$ ) {
 				}
 
 				if ( settings.oFeatures.bServerSide ) {
-					if ( $.isFunction( settings.ajax ) ) {
+					if ( typeof settings.ajax === 'function' ) {
 						return;
 					}
 					$.ajax( {

examples/resources/examples.php

@@ -1,8 +1,12 @@
 <?php
 
-if ( isset( $_POST['src'] ) && preg_match( '/scripts\/[a-zA-Z_\-_]+\.php/', $_POST['src'] ) !== 0 ) {
+if ( isset( $_POST['src'] ) && (
+	preg_match( '/^scripts\/[a-zA-Z_\-_]+\.php$/', $_POST['src'] ) !== 0 ||
+	preg_match( '/^\.\.\/server_side\/scripts\/[a-zA-Z_\-_]+\.php$/', $_POST['src'] ) !== 0
+) ) {
 	echo htmlspecialchars( file_get_contents( '../server_side/'.$_POST['src'] ) );
 }
+
 else {
 	echo '';
 }

examples/resources/syntax/shCore.css

@@ -50,6 +50,7 @@
   font-size: 1em !important;
   min-height: inherit !important;
   min-height: auto !important;
+  white-space: nowrap;
 }
 
 .syntaxhighlighter {
@@ -58,6 +59,12 @@
   position: relative !important;
   overflow: auto !important;
   font-size: 1em !important;
+  clear: both;
+
+  box-shadow: inset 0 0 3px #555;
+  padding: 5px 3px;
+  background: #f8f8f8 !important;
+  box-sizing: border-box;
 }
 .syntaxhighlighter.source {
   overflow: hidden !important;
@@ -133,8 +140,8 @@
 }
 .syntaxhighlighter .toolbar {
   position: absolute !important;
-  right: 1px !important;
-  top: -18px !important;
+  right: 10px !important;
+  top: 0 !important;
   font-size: 10px !important;
   z-index: 7 !important;
 }
@@ -242,7 +249,6 @@
  * Dual licensed under the MIT and GPL licenses.
  */
 .syntaxhighlighter {
-  background-color: white !important;
   font-size: 13px !important;
   overflow: visible !important;
 }
@@ -267,7 +273,7 @@
   color: #5C5C5C !important;
 }
 .syntaxhighlighter .gutter .line.alt1, .syntaxhighlighter  .gutter .line.alt2 {
-  background-color: white !important;
+  background-color: transparent !important;
 }
 .odd .syntaxhighlighter .gutter .line.alt1, .odd .syntaxhighlighter  .gutter .line.alt2 {
   background-color: #F2F2F2 !important;

examples/resources/syntax/shCore.js

@@ -193,8 +193,9 @@ var sh = {
                 ;
 
             // execute the toolbar command
-            if (highlighter && commandName && sh.toolbar.items[commandName].execute)
+            if (highlighter && commandName && sh.toolbar.items[commandName] && sh.toolbar.items[commandName].execute) {
                 sh.toolbar.items[commandName].execute(highlighter);
+            }
 
             // disable default A click behaviour
             e.preventDefault();
@@ -302,10 +303,10 @@ var sh = {
      */
     highlight: function(globalParams, element)
     {
-        // Don't run the syntax highlighter on IE6/7 as it absolutely kills
+        // Don't run the syntax highlighter on IE6/7/8 as it absolutely kills
         // performance
         var userAgent = navigator.appVersion;
-        if (userAgent.indexOf("MSIE 7.") !== -1 || userAgent.indexOf("MSIE 6.") !== -1) {
+        if (userAgent.indexOf("MSIE 8.") !== -1 || userAgent.indexOf("MSIE 7.") !== -1 || userAgent.indexOf("MSIE 6.") !== -1) {
             return;
         }
 

examples/server_side/custom_vars.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Custom HTTP variables</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"processing": true,
@@ -35,28 +34,24 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Custom HTTP variables</span></h1>
-
 			<div class="info">
 				<p>It can often be useful to send extra information to the server when utilising DataTables' server-side processing option. This is done by using the <a href=
-				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option's <code>data</code> parameter which
-				can be used in one of two different ways:</p>
-
+				"//datatables.net/reference/option/ajax.data"><code class="option" title="DataTables initialisation option">ajax.data</code></a> option which can be used in one of
+				two different ways:</p>
 				<ul class="markdown">
 					<li><code>object</code> - An object data to send to the server. This is useful for adding static data to the request.</li>
 					<li><code>function</code> - A function which will manipulate the data object to send to the server, adding values as required. Using the <code>data</code>
 					parameter as a function allows the additional data to evaluated and added to the request at the time the request is made.</li>
 				</ul>
-
 				<p>The example below shows server-side processing being used with an extra parameter being sent to the server by using the <code>ajax.data</code> option as a
 				function.</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>First name</th>
@@ -67,7 +62,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>First name</th>
@@ -79,7 +73,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -87,7 +80,6 @@ $(document).ready(function() {
 				<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() {
@@ -104,37 +96,35 @@ $(document).ready(function() {
 		}
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -143,155 +133,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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="./index.html">Server-side</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Server-side processing</a></li>
-							<li class="active"><a href="./custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="./post.html">POST data</a></li>
-							<li><a href="./ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="./object_data.html">Object data source</a></li>
-							<li><a href="./row_details.html">Row details</a></li>
-							<li><a href="./select_rows.html">Row selection</a></li>
-							<li><a href="./jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="./defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<li>
+								<a href="./simple.html">Server-side processing</a>
+							</li>
+							<li class="active">
+								<a href="./custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="./post.html">POST data</a>
+							</li>
+							<li>
+								<a href="./ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="./object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="./select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="./jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="./defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="./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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/defer_loading.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Deferred loading of 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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"processing": true,
@@ -29,28 +28,24 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Deferred loading of data</span></h1>
-
 			<div class="info">
 				<p>When using DataTables with server-side processing, the default behaviour is to have DataTables automatically make an Ajax call and load the data, removing
 				anything which might have already been in the table. However, this behaviour might not always be desirable when the first page of the table has already been
 				preloaded in the HTML (which you might do to ensure accessibility or for performance reasons).</p>
-
 				<p>This automatic Ajax call to get the first page of data can be overridden by using the <a href="//datatables.net/reference/option/deferLoading"><code class=
 				"option" title="DataTables initialisation option">deferLoading</code></a> initialisation property. It serves two purposes, firstly to indicate that deferred
 				loading is required, but also to tell DataTables how many records there are in the full table, in this case 57 (this allows the information element and pagination
 				to be displayed correctly).</p>
-
 				<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use <a href=
 				"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading</code></a> to tell DataTables that this
-				data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
+				data is available and that it should wait for user interaction (ordering, paging etc) before making an Ajax call.</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>First name</th>
@@ -61,18 +56,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
-				<tfoot>
-					<tr>
-						<th>First name</th>
-						<th>Last name</th>
-						<th>Position</th>
-						<th>Office</th>
-						<th>Start date</th>
-						<th>Salary</th>
-					</tr>
-				</tfoot>
-
 				<tr class="odd">
 					<td>Airi</td>
 					<td>Satou</td>
@@ -153,8 +136,17 @@ $(document).ready(function() {
 					<td>29th Mar 12</td>
 					<td>$433,060</td>
 				</tr>
+				<tfoot>
+					<tr>
+						<th>First name</th>
+						<th>Last name</th>
+						<th>Position</th>
+						<th>Office</th>
+						<th>Start date</th>
+						<th>Salary</th>
+					</tr>
+				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -162,7 +154,6 @@ $(document).ready(function() {
 				<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() {
@@ -173,37 +164,35 @@ $(document).ready(function() {
 		&quot;deferLoading&quot;: 57
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -212,155 +201,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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="./index.html">Server-side</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Server-side processing</a></li>
-							<li><a href="./custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="./post.html">POST data</a></li>
-							<li><a href="./ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="./object_data.html">Object data source</a></li>
-							<li><a href="./row_details.html">Row details</a></li>
-							<li><a href="./select_rows.html">Row selection</a></li>
-							<li><a href="./jsonp.html">JSONP data source for remote domains</a></li>
-							<li class="active"><a href="./defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<li>
+								<a href="./simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="./custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="./post.html">POST data</a>
+							</li>
+							<li>
+								<a href="./ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="./object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="./select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="./jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li class="active">
+								<a href="./defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="./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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/ids.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Automatic addition of row ID attributes</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"processing": true,
@@ -36,25 +35,21 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Automatic addition of row ID attributes</span></h1>
-
 			<div class="info">
 				<p>Often when using server-side processing you will find that it can be useful to have a specific ID on each row (the primary key value from the database for
 				example). By assigning the ID you want to apply to each row using the property <code>DT_RowId</code> of the data source object for each row (this property name can
-				be configured using the <a href="//datatables.net/reference/option/idSrc"><code class="option" title="DataTables initialisation option">idSrc</code></a> option),
+				be configured using the <a href="//datatables.net/reference/option/rowId"><code class="option" title="DataTables initialisation option">rowId</code></a> option),
 				DataTables will automatically add it for you (note that this will work for Ajax and Javascript loaded data as well as for server-side processing).</p>
-
 				<p>In addition to <code>DT_RowId</code> there are other properties which perform similar actions - please refer to the <a href=
 				"https://datatables.net/manual/server-side">server-side processing section of the manual</a> for full details.</p>
-
 				<p>This example below shows <code>DT_RowId</code> being used to add information to the table. In addition objects are used as the data source for the rows.</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>First name</th>
@@ -65,7 +60,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>First name</th>
@@ -77,7 +71,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -85,7 +78,6 @@ $(document).ready(function() {
 				<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() {
@@ -103,37 +95,35 @@ $(document).ready(function() {
 		]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -142,155 +132,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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="./index.html">Server-side</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Server-side processing</a></li>
-							<li><a href="./custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="./post.html">POST data</a></li>
-							<li class="active"><a href="./ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="./object_data.html">Object data source</a></li>
-							<li><a href="./row_details.html">Row details</a></li>
-							<li><a href="./select_rows.html">Row selection</a></li>
-							<li><a href="./jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="./defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<li>
+								<a href="./simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="./custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="./post.html">POST data</a>
+							</li>
+							<li class="active">
+								<a href="./ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="./object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="./select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="./jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="./defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="./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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/index.html

@@ -3,65 +3,76 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
+	<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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
-
 	<title>DataTables examples - Server-side processing</title>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<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 etc actions that DataTables performs are handed off to a
-				server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such,
-				each draw of the table will result in a new Ajax request being made to get the required data.</p>
-
+				options that DataTables provides. With server-side processing enabled, all actions that DataTables performs (such as paging, searching and ordering) 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 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>The examples in this section shows server-side processing in use and how it can be customised to suit your needs.</p>
+				<p>The examples in this section show server-side processing in use and how it can be customised to suit your needs.</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">Server-side</a></h3>
 						<ul class="toc">
-							<li><a href="./simple.html">Server-side processing</a></li>
-							<li><a href="./custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="./post.html">POST data</a></li>
-							<li><a href="./ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="./object_data.html">Object data source</a></li>
-							<li><a href="./row_details.html">Row details</a></li>
-							<li><a href="./select_rows.html">Row selection</a></li>
-							<li><a href="./jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="./defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<li>
+								<a href="./simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="./custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="./post.html">POST data</a>
+							</li>
+							<li>
+								<a href="./ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="./object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="./select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="./jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="./defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/jsonp.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - JSONP data source for remote domains</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"processing": true,
@@ -31,28 +30,24 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>JSONP data source for remote domains</span></h1>
-
 			<div class="info">
 				<p><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> is one of several methods to allow the use of JSON data from any server
 				(browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load
 				server-side sourced data from any domain and is quite simply done with the <code>dataType</code> option of the <a href=
 				"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initialisation option.</p>
-
 				<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
 				option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used in jQuery's Ajax function can
 				also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
 				option).</p>
-
 				<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
 				used with the <code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</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>First name</th>
@@ -63,7 +58,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>First name</th>
@@ -75,7 +69,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -83,7 +76,6 @@ $(document).ready(function() {
 				<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() {
@@ -96,37 +88,35 @@ $(document).ready(function() {
 		}
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -135,155 +125,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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="./index.html">Server-side</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Server-side processing</a></li>
-							<li><a href="./custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="./post.html">POST data</a></li>
-							<li><a href="./ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="./object_data.html">Object data source</a></li>
-							<li><a href="./row_details.html">Row details</a></li>
-							<li><a href="./select_rows.html">Row selection</a></li>
-							<li class="active"><a href="./jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="./defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<li>
+								<a href="./simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="./custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="./post.html">POST data</a>
+							</li>
+							<li>
+								<a href="./ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="./object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="./select_rows.html">Row selection</a>
+							</li>
+							<li class="active">
+								<a href="./jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="./defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="./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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/object_data.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Object 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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 $(document).ready(function() {
 	$('#example').DataTable( {
 		"processing": true,
@@ -36,23 +35,20 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Object data source</span></h1>
-
 			<div class="info">
 				<p>The default data format that DataTables expects for server-side processing is a 2D array of data (rows by columns). However, this is often not flexible enough
 				for either the server-side environment, or you might want to convey more information in the data source than is necessary to show in the table (row IDs from the
 				database for example). For these situations DataTables supports the reading of data for objects as well as arrays.</p>
-
 				<p>In this example the server responds with an array of objects, where DataTables will look up and use each property that is specified by the <a href=
 				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> property given for each
 				column.</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>First name</th>
@@ -63,7 +59,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>First name</th>
@@ -75,7 +70,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -83,7 +77,6 @@ $(document).ready(function() {
 				<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() {
@@ -101,37 +94,35 @@ $(document).ready(function() {
 		]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -140,155 +131,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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="./index.html">Server-side</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Server-side processing</a></li>
-							<li><a href="./custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="./post.html">POST data</a></li>
-							<li><a href="./ids.html">Automatic addition of row ID attributes</a></li>
-							<li class="active"><a href="./object_data.html">Object data source</a></li>
-							<li><a href="./row_details.html">Row details</a></li>
-							<li><a href="./select_rows.html">Row selection</a></li>
-							<li><a href="./jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="./defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<li>
+								<a href="./simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="./custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="./post.html">POST data</a>
+							</li>
+							<li>
+								<a href="./ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li class="active">
+								<a href="./object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="./select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="./jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="./defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="./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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/pipeline.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Pipelining data to reduce Ajax calls for paging</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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 //
 // Pipelining function for DataTables. To be used to the `ajax` option of DataTables
@@ -82,7 +81,7 @@ $.fn.dataTable.pipeline = function ( opts ) {
 			request.length = requestLength*conf.pages;
 
 			// Provide the same `data` options as DataTables.
-			if ( $.isFunction ( conf.data ) ) {
+			if ( typeof conf.data === 'function' ) {
 				// As a function it is executed with the data object as an arg
 				// for manipulation. If an object is returned, it is used as the
 				// data object to submit
@@ -108,7 +107,9 @@ $.fn.dataTable.pipeline = function ( opts ) {
 					if ( cacheLower != drawStart ) {
 						json.data.splice( 0, drawStart-cacheLower );
 					}
-					json.data.splice( requestLength, json.data.length );
+					if ( requestLength >= -1 ) {
+						json.data.splice( requestLength, json.data.length );
+					}
 					
 					drawCallback( json );
 				}
@@ -151,27 +152,23 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Pipelining data to reduce Ajax calls for paging</span></h1>
-
 			<div class="info">
 				<p>Server-side processing can be quite hard on your server, since it makes an Ajax call to the server for every draw request that is made. On sites with a large
 				number of page views, you could potentially end up DDoSing your own server with your own applications!</p>
-
 				<p>This example shows one technique to reduce the number of Ajax calls that are made to the server by caching more data than is needed for each draw. This is done
 				by intercepting the Ajax call and routing it through a data cache control; using the data from the cache if available, and making the Ajax request if not. This
 				intercept of the Ajax request is performed by giving the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
 				"DataTables initialisation option">ajax</code></a> option as a function. This function then performs the logic of deciding if another Ajax call is needed, or if
 				data from the cache can be used.</p>
-
 				<p>Keep in mind that this caching is for paging only; the pipeline must be cleared for other interactions such as ordering and searching since the full data set,
 				when using server-side processing, is only available at the server.</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>First name</th>
@@ -182,7 +179,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>First name</th>
@@ -194,7 +190,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -202,7 +197,6 @@ $(document).ready(function() {
 				<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">//
@@ -268,7 +262,7 @@ $.fn.dataTable.pipeline = function ( opts ) {
 			request.length = requestLength*conf.pages;
 
 			// Provide the same `data` options as DataTables.
-			if ( $.isFunction ( conf.data ) ) {
+			if ( typeof conf.data === 'function' ) {
 				// As a function it is executed with the data object as an arg
 				// for manipulation. If an object is returned, it is used as the
 				// data object to submit
@@ -294,7 +288,9 @@ $.fn.dataTable.pipeline = function ( opts ) {
 					if ( cacheLower != drawStart ) {
 						json.data.splice( 0, drawStart-cacheLower );
 					}
-					json.data.splice( requestLength, json.data.length );
+					if ( requestLength &gt;= -1 ) {
+						json.data.splice( requestLength, json.data.length );
+					}
 					
 					drawCallback( json );
 				}
@@ -333,37 +329,35 @@ $(document).ready(function() {
 		} )
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -372,155 +366,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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="./index.html">Server-side</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Server-side processing</a></li>
-							<li><a href="./custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="./post.html">POST data</a></li>
-							<li><a href="./ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="./object_data.html">Object data source</a></li>
-							<li><a href="./row_details.html">Row details</a></li>
-							<li><a href="./select_rows.html">Row selection</a></li>
-							<li><a href="./jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="./defer_loading.html">Deferred loading of data</a></li>
-							<li class="active"><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<li>
+								<a href="./simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="./custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="./post.html">POST data</a>
+							</li>
+							<li>
+								<a href="./ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="./object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="./select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="./jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="./defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li class="active">
+								<a href="./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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/post.html

@@ -3,21 +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="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - POST 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="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 $(document).ready(function() {
 	$('#example').DataTable( {
@@ -40,27 +39,23 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>POST data</span></h1>
-
 			<div class="info">
 				<p>By default, the Ajax request that DataTables makes to obtain server-side processing data is an HTTP GET request. However, there are times when you might wish to
 				use POST. This is very easily done by using the <code>type</code> option of the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
 				"DataTables initialisation option">ajax</code></a> initialisation option.</p>
-
 				<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
 				option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used in jQuery's Ajax function can
 				also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
 				option).</p>
-
 				<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
 				used with the <code>type</code> option set to <code class="string" title="String">POST</code> to make a POST request.</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>First name</th>
@@ -71,7 +66,6 @@ $(document).ready(function() {
 						<th>Salary</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th>First name</th>
@@ -83,7 +77,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -91,7 +84,6 @@ $(document).ready(function() {
 				<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() {
@@ -112,37 +104,35 @@ $(document).ready(function() {
 		]
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
 						additional CSS used is shown below:</p><code class="multiline language-css"></code>
 					</div>
-
 					<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
-
 					<ul>
-						<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
+						<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
@@ -151,155 +141,325 @@ $(document).ready(function() {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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="./index.html">Server-side</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Server-side processing</a></li>
-							<li><a href="./custom_vars.html">Custom HTTP variables</a></li>
-							<li class="active"><a href="./post.html">POST data</a></li>
-							<li><a href="./ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="./object_data.html">Object data source</a></li>
-							<li><a href="./row_details.html">Row details</a></li>
-							<li><a href="./select_rows.html">Row selection</a></li>
-							<li><a href="./jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="./defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<li>
+								<a href="./simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="./custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li class="active">
+								<a href="./post.html">POST data</a>
+							</li>
+							<li>
+								<a href="./ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="./object_data.html">Object data source</a>
+							</li>
+							<li>
+								<a href="./row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="./select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="./jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="./defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="./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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/row_details.html

@@ -3,14 +3,13 @@
 <head>
 	<meta charset="utf-8">
 	<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
-	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
-
+	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
 	<title>DataTables example - Row details</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;
@@ -20,12 +19,12 @@ tr.details td.details-control {
 }
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
+	<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
 	<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
 	<script type="text/javascript" language="javascript" class="init">
-
+	
 
 function format ( d ) {
 	return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+
@@ -89,34 +88,29 @@ $(document).ready(function() {
 
 	</script>
 </head>
-
 <body class="dt-example">
 	<div class="container">
 		<section>
 			<h1>DataTables example <span>Row details</span></h1>
-
 			<div class="info">
 				<p>This example shows the use of DataTables' ability to show and hide child rows which are attached to a parent row in the host table. This is often used to show
 				additional information about a row, particularly when you wish to convey more information about a row than there is space for in the host table.</p>
-
 				<p>The example below shows server-side processing being used with the first column having an event listener attached to it which will toggle the child row's
 				display. This is set up using <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
 				"DataTables initialisation option">columns.data</code></a> and <a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
 				"DataTables initialisation option">columns.defaultContent</code></a>, in combination with CSS to show an empty cell with a background image which can be clicked
 				upon.</p>
-
 				<p>The event handler 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 firstly check if a row is already displayed, and if so hide it, if not show it. The content of the child row is, in this example, defined by the
 				<code>format()</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. Note that the format details function has access to the full data source object for the row, including
 				information that is not actually shown in the table (the salary parameter for example).</p>
-
 				<p>Furthermore, this example shows a small difference from the <a href="../api/row_details.html">client-side row details example</a> in that to have rows
 				automatically reopen when the table is redrawn, we need to track a unique identifier for each row - in this case the row <code>id</code>. This is required because
 				in server-side processing mode rows are automatically destroyed and recreated on each draw.</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>
@@ -126,7 +120,6 @@ $(document).ready(function() {
 						<th>Office</th>
 					</tr>
 				</thead>
-
 				<tfoot>
 					<tr>
 						<th></th>
@@ -137,7 +130,6 @@ $(document).ready(function() {
 					</tr>
 				</tfoot>
 			</table>
-
 			<ul class="tabs">
 				<li class="active">Javascript</li>
 				<li>HTML</li>
@@ -145,7 +137,6 @@ $(document).ready(function() {
 				<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">function format ( d ) {
@@ -207,19 +198,19 @@ $(document).ready(function() {
 		} );
 	} );
 } );</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="//code.jquery.com/jquery-1.11.3.min.js">//code.jquery.com/jquery-1.11.3.min.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.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
+						</li>
+						<li>
+							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
+						</li>
 					</ul>
 				</div>
-
 				<div class="table">
 					<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
 				</div>
-
 				<div class="css">
 					<div>
 						<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
@@ -231,19 +222,17 @@ tr.details td.details-control {
 	background: url('../resources/details_close.png') no-repeat center center;
 }</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="../../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
@@ -252,155 +241,325 @@ tr.details td.details-control {
 			</div>
 		</section>
 	</div>
-
 	<section>
 		<div class="footer">
 			<div class="gradient"></div>
-
 			<div class="liner">
 				<h2>Other examples</h2>
-
 				<div class="toc">
 					<div class="toc-group">
 						<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
-							<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
-							<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
-							<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
-							<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
-							<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
-							<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
-							<li><a href="../basic_init/dom.html">DOM positioning</a></li>
-							<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
-							<li><a href="../basic_init/state_save.html">State saving</a></li>
-							<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
-							<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
-							<li><a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a></li>
-							<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
-							<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
-							<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
-							<li><a href="../basic_init/language.html">Language options</a></li>
+							<li>
+								<a href="../basic_init/zero_configuration.html">Zero configuration</a>
+							</li>
+							<li>
+								<a href="../basic_init/filter_only.html">Feature enable / disable</a>
+							</li>
+							<li>
+								<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
+							</li>
+							<li>
+								<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
+							</li>
+							<li>
+								<a href="../basic_init/multiple_tables.html">Multiple tables</a>
+							</li>
+							<li>
+								<a href="../basic_init/hidden_columns.html">Hidden columns</a>
+							</li>
+							<li>
+								<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
+							</li>
+							<li>
+								<a href="../basic_init/dom.html">DOM positioning</a>
+							</li>
+							<li>
+								<a href="../basic_init/flexible_width.html">Flexible table width</a>
+							</li>
+							<li>
+								<a href="../basic_init/state_save.html">State saving</a>
+							</li>
+							<li>
+								<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
+							</li>
+							<li>
+								<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
+							</li>
+							<li>
+								<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
+							</li>
+							<li>
+								<a href="../basic_init/language.html">Language options</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
 						<ul class="toc">
-							<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
-							<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
-							<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
-							<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
-							<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
-							<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
-							<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
-							<li><a href="../advanced_init/html5-data-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>
+							<li>
+								<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dt_events.html">DataTables events</a>
+							</li>
+							<li>
+								<a href="../advanced_init/column_render.html">Column rendering</a>
+							</li>
+							<li>
+								<a href="../advanced_init/length_menu.html">Page length options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
+							</li>
+							<li>
+								<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
+							</li>
+							<li>
+								<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
+							</li>
+							<li>
+								<a href="../advanced_init/language_file.html">Language file</a>
+							</li>
+							<li>
+								<a href="../advanced_init/defaults.html">Setting defaults</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_callback.html">Row created callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/row_grouping.html">Row grouping</a>
+							</li>
+							<li>
+								<a href="../advanced_init/footer_callback.html">Footer callback</a>
+							</li>
+							<li>
+								<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
+							</li>
+							<li>
+								<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
+							</li>
 						</ul>
 					</div>
-
 					<div class="toc-group">
 						<h3><a href="../styling/index.html">Styling</a></h3>
 						<ul class="toc">
-							<li><a href="../styling/display.html">Base style</a></li>
-							<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
-							<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
-							<li><a href="../styling/compact.html">Base style - compact</a></li>
-							<li><a href="../styling/hover.html">Base style - hover</a></li>
-							<li><a href="../styling/order-column.html">Base style - order-column</a></li>
-							<li><a href="../styling/row-border.html">Base style - row borders</a></li>
-							<li><a href="../styling/stripe.html">Base style - stripe</a></li>
-							<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
-							<li><a href="../styling/foundation.html">Foundation</a></li>
-							<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</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>
 						<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>
+							<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>
+							<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>
+							<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="./index.html">Server-side</a></h3>
 						<ul class="toc active">
-							<li><a href="./simple.html">Server-side processing</a></li>
-							<li><a href="./custom_vars.html">Custom HTTP variables</a></li>
-							<li><a href="./post.html">POST data</a></li>
-							<li><a href="./ids.html">Automatic addition of row ID attributes</a></li>
-							<li><a href="./object_data.html">Object data source</a></li>
-							<li class="active"><a href="./row_details.html">Row details</a></li>
-							<li><a href="./select_rows.html">Row selection</a></li>
-							<li><a href="./jsonp.html">JSONP data source for remote domains</a></li>
-							<li><a href="./defer_loading.html">Deferred loading of data</a></li>
-							<li><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
+							<li>
+								<a href="./simple.html">Server-side processing</a>
+							</li>
+							<li>
+								<a href="./custom_vars.html">Custom HTTP variables</a>
+							</li>
+							<li>
+								<a href="./post.html">POST data</a>
+							</li>
+							<li>
+								<a href="./ids.html">Automatic addition of row ID attributes</a>
+							</li>
+							<li>
+								<a href="./object_data.html">Object data source</a>
+							</li>
+							<li class="active">
+								<a href="./row_details.html">Row details</a>
+							</li>
+							<li>
+								<a href="./select_rows.html">Row selection</a>
+							</li>
+							<li>
+								<a href="./jsonp.html">JSONP data source for remote domains</a>
+							</li>
+							<li>
+								<a href="./defer_loading.html">Deferred loading of data</a>
+							</li>
+							<li>
+								<a href="./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>
+							<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> &#169; 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2018<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/scripts/firebird.sql

@@ -0,0 +1,73 @@
+	--
+	-- DataTables Ajax and server-side processing database (Oracle)
+	--
+	CREATE TABLE "datatables_demo" (
+		"id"         integer generated by default as identity primary key,
+		"first_name" varchar(250) default '' not null,
+		"last_name"  varchar(250) default '' not null,
+		"position"   varchar(250) default '' not null,
+		"email"      varchar(250) default '' not null,
+		"office"     varchar(250) default '' not null,
+		"start_date" timestamp default NULL,
+		"age"        int,
+		"salary"     int,
+		"seq"        int,
+		"extn"       varchar(8) default '' not null
+	);
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Tiger', 'Nixon', 61, 'System Architect', 320800, '25.Apr.2011', 5421, 't.nixon@datatables.net', 'Edinburgh', 2 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Garrett', 'Winters', 63, 'Accountant', 170750, '25.Jul.2011', 8422, 'g.winters@datatables.net', 'Tokyo', 22 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '12.Jan.2009', 1562, 'a.cox@datatables.net', 'San Francisco', 6 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '29.Mar.2012', 6224, 'c.kelly@datatables.net', 'Edinburgh', 41 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Airi', 'Satou', 33, 'Accountant', 162700, '28.Nov.2008', 5407, 'a.satou@datatables.net', 'Tokyo', 55 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '02.Dec.2012', 4804, 'b.williamson@datatables.net', 'New York', 21 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '06.Aug.2012', 9608, 'h.chandler@datatables.net', 'San Francisco', 46 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '14.Oct.2010', 6200, 'r.davidson@datatables.net', 'Tokyo', 50 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '15.Sep.2009', 2360, 'c.hurst@datatables.net', 'San Francisco', 26 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '13.Dec.2008', 1667, 's.frost@datatables.net', 'Edinburgh', 18 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Jena', 'Gaines', 30, 'Office Manager', 90560, '19.Dec.2008', 3814, 'j.gaines@datatables.net', 'London', 13 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '03.Mar.2013', 9497, 'q.flynn@datatables.net', 'Edinburgh', 23 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Charde', 'Marshall', 36, 'Regional Director', 470600, '16.Oct.2008', 6741, 'c.marshall@datatables.net', 'San Francisco', 14 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '18.Dec.2012', 3597, 'h.kennedy@datatables.net', 'London', 12 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '17.Mar.2010', 1965, 't.fitzpatrick@datatables.net', 'London', 54 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '27.Nov.2012', 1581, 'm.silva@datatables.net', 'London', 37 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '09.Jun.2010', 3059, 'p.byrd@datatables.net', 'New York', 32 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '10.Apr.2009', 1721, 'g.little@datatables.net', 'New York', 35 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '13.Oct.2012', 2558, 'b.greer@datatables.net', 'London', 48 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '26.Sep.2012', 2290, 'd.rios@datatables.net', 'Edinburgh', 45 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '03.Sep.2011', 1937, 'j.caldwell@datatables.net', 'New York', 17 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '25.Jun.2009', 6154, 'y.berry@datatables.net', 'New York', 57 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '12.Dec.2011', 8330, 'c.vance@datatables.net', 'New York', 29 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '20.Sep.2010', 3023, 'd.wilder@datatables.net', 'Sidney', 56 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '09.Oct.2009', 5797, 'a.ramos@datatables.net', 'London', 36 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Gavin', 'Joyce', 42, 'Developer', 92575, '22.Dec.2010', 8822, 'g.joyce@datatables.net', 'Edinburgh', 5 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '14.Nov.2010', 9239, 'j.chang@datatables.net', 'Singapore', 51 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '07.Jun.2011', 1314, 'b.wagner@datatables.net', 'San Francisco', 20 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '11.Mar.2010', 2947, 'f.green@datatables.net', 'San Francisco', 7 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '14.Aug.2011', 8899, 's.itou@datatables.net', 'Tokyo', 1 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Michelle', 'House', 37, 'Integration Specialist', 95400, '02.Jun.2011', 2769, 'm.house@datatables.net', 'Sidney', 39 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Suki', 'Burks', 53, 'Developer', 114500, '22.Oct.2009', 6832, 's.burks@datatables.net', 'London', 40 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '07.May.2011', 3606, 'p.bartlett@datatables.net', 'London', 47 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '26.Oct.2008', 2860, 'g.cortez@datatables.net', 'San Francisco', 52 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '09.Mar.2011', 8240, 'm.mccray@datatables.net', 'Edinburgh', 8 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '09.Dec.2009', 5384, 'u.butler@datatables.net', 'San Francisco', 24 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '16.Dec.2008', 7031, 'h.hatfield@datatables.net', 'San Francisco', 38 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Hope', 'Fuentes', 41, 'Secretary', 109850, '12.Feb.2010', 6318, 'h.fuentes@datatables.net', 'San Francisco', 53 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '14.Feb.2009', 9422, 'v.harrell@datatables.net', 'San Francisco', 30 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '11.Dec.2008', 7580, 't.mooney@datatables.net', 'London', 28 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Jackson', 'Bradshaw', 65, 'Director', 645750, '26.Sep.2008', 1042, 'j.bradshaw@datatables.net', 'New York', 34 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '03.Feb.2011', 2120, 'o.liang@datatables.net', 'Singapore', 4 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '03.May.2011', 6222, 'b.nash@datatables.net', 'London', 3 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '19.Aug.2009', 9383, 's.yamamoto@datatables.net', 'Tokyo', 31 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Thor', 'Walton', 61, 'Developer', 98540, '11.Aug.2013', 8327, 't.walton@datatables.net', 'New York', 11 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '07.Jul.2009', 2927, 'f.camacho@datatables.net', 'San Francisco', 10 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '09.Apr.2012', 8352, 's.baldwin@datatables.net', 'Singapore', 44 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '04.Jan.2010', 7439, 'z.frank@datatables.net', 'New York', 42 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '01.Jun.2012', 4389, 'z.serrano@datatables.net', 'San Francisco', 27 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '01.Feb.2013', 3431, 'j.acosta@datatables.net', 'Edinburgh', 49 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '06.Dec.2011', 3990, 'c.stevens@datatables.net', 'New York', 15 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Hermione', 'Butler', 47, 'Regional Director', 356250, '21.Mar.2011', 1016, 'h.butler@datatables.net', 'London', 9 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '27.Feb.2009', 6733, 'l.greer@datatables.net', 'London', 25 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Jonas', 'Alexander', 30, 'Developer', 86500, '14.Jul.2010', 8196, 'j.alexander@datatables.net', 'San Francisco', 33 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Shad', 'Decker', 51, 'Regional Director', 183000, '13.Nov.2008', 6373, 's.decker@datatables.net', 'Edinburgh', 43 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '27.Jun.2011', 5384, 'm.bruce@datatables.net', 'Singapore', 16 );
+INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Donna', 'Snider', 27, 'Customer Support', 112000, '25.Jan.2011', 4226, 'd.snider@datatables.net', 'New York', 19 );

examples/server_side/scripts/mysql.sql

@@ -11,7 +11,7 @@ CREATE TABLE `datatables_demo` (
 	`position`   varchar(250) NOT NULL default '',
 	`email`      varchar(250) NOT NULL default '',
 	`office`     varchar(250) NOT NULL default '',
-	`start_date` datetime default CURRENT_TIMESTAMP,
+	`start_date` datetime default NULL,
 	`age`        int(8),
 	`salary`     int(8),
 	`seq`        int(8),

examples/server_side/scripts/oracle.sql

@@ -0,0 +1,91 @@
+--
+-- DataTables Ajax and server-side processing database (Oracle)
+--
+BEGIN
+	EditorDelObject('datatables_demo', 'TABLE');
+	EditorDelObject('datatables_demo_seq', 'SEQUENCE');
+END;
+
+CREATE TABLE datatables_demo (
+	id INT PRIMARY KEY NOT NULL,
+	first_name NVARCHAR2(250),
+	last_name  NVARCHAR2(250),
+	position   NVARCHAR2(250),
+	email      NVARCHAR2(250),
+	office     NVARCHAR2(250),
+	start_date DATE,
+	age        INT,
+	salary     INT,
+	seq        INT,
+	extn       NVARCHAR2(8)
+);
+
+CREATE SEQUENCE datatables_demo_seq;
+
+CREATE OR REPLACE TRIGGER datatables_demo_on_insert
+	BEFORE INSERT ON datatables_demo
+	FOR EACH ROW
+	BEGIN
+		SELECT datatables_demo_seq.nextval
+		INTO :new.id
+		FROM dual;
+	END;
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Tiger', 'Nixon', 61, 'System Architect', 320800, '25-Apr-2011', 5421, 't.nixon@datatables.net', 'Edinburgh', 2 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Garrett', 'Winters', 63, 'Accountant', 170750, '25-Jul-2011', 8422, 'g.winters@datatables.net', 'Tokyo', 22 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '12-Jan-2009', 1562, 'a.cox@datatables.net', 'San Francisco', 6 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '29-Mar-2012', 6224, 'c.kelly@datatables.net', 'Edinburgh', 41 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Airi', 'Satou', 33, 'Accountant', 162700, '28-Nov-2008', 5407, 'a.satou@datatables.net', 'Tokyo', 55 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '02-Dec-2012', 4804, 'b.williamson@datatables.net', 'New York', 21 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '06-Aug-2012', 9608, 'h.chandler@datatables.net', 'San Francisco', 46 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '14-Oct-2010', 6200, 'r.davidson@datatables.net', 'Tokyo', 50 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '15-Sep-2009', 2360, 'c.hurst@datatables.net', 'San Francisco', 26 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '13-Dec-2008', 1667, 's.frost@datatables.net', 'Edinburgh', 18 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Jena', 'Gaines', 30, 'Office Manager', 90560, '19-Dec-2008', 3814, 'j.gaines@datatables.net', 'London', 13 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '03-Mar-2013', 9497, 'q.flynn@datatables.net', 'Edinburgh', 23 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Charde', 'Marshall', 36, 'Regional Director', 470600, '16-Oct-2008', 6741, 'c.marshall@datatables.net', 'San Francisco', 14 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '18-Dec-2012', 3597, 'h.kennedy@datatables.net', 'London', 12 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '17-Mar-2010', 1965, 't.fitzpatrick@datatables.net', 'London', 54 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '27-Nov-2012', 1581, 'm.silva@datatables.net', 'London', 37 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '09-Jun-2010', 3059, 'p.byrd@datatables.net', 'New York', 32 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '10-Apr-2009', 1721, 'g.little@datatables.net', 'New York', 35 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '13-Oct-2012', 2558, 'b.greer@datatables.net', 'London', 48 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '26-Sep-2012', 2290, 'd.rios@datatables.net', 'Edinburgh', 45 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '03-Sep-2011', 1937, 'j.caldwell@datatables.net', 'New York', 17 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '25-Jun-2009', 6154, 'y.berry@datatables.net', 'New York', 57 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '12-Dec-2011', 8330, 'c.vance@datatables.net', 'New York', 29 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '20-Sep-2010', 3023, 'd.wilder@datatables.net', 'Sidney', 56 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '09-Oct-2009', 5797, 'a.ramos@datatables.net', 'London', 36 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Gavin', 'Joyce', 42, 'Developer', 92575, '22-Dec-2010', 8822, 'g.joyce@datatables.net', 'Edinburgh', 5 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '14-Nov-2010', 9239, 'j.chang@datatables.net', 'Singapore', 51 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '07-Jun-2011', 1314, 'b.wagner@datatables.net', 'San Francisco', 20 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '11-Mar-2010', 2947, 'f.green@datatables.net', 'San Francisco', 7 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '14-Aug-2011', 8899, 's.itou@datatables.net', 'Tokyo', 1 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Michelle', 'House', 37, 'Integration Specialist', 95400, '02-Jun-2011', 2769, 'm.house@datatables.net', 'Sidney', 39 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Suki', 'Burks', 53, 'Developer', 114500, '22-Oct-2009', 6832, 's.burks@datatables.net', 'London', 40 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '07-May-2011', 3606, 'p.bartlett@datatables.net', 'London', 47 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '26-Oct-2008', 2860, 'g.cortez@datatables.net', 'San Francisco', 52 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '09-Mar-2011', 8240, 'm.mccray@datatables.net', 'Edinburgh', 8 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '09-Dec-2009', 5384, 'u.butler@datatables.net', 'San Francisco', 24 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '16-Dec-2008', 7031, 'h.hatfield@datatables.net', 'San Francisco', 38 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Hope', 'Fuentes', 41, 'Secretary', 109850, '12-Feb-2010', 6318, 'h.fuentes@datatables.net', 'San Francisco', 53 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '14-Feb-2009', 9422, 'v.harrell@datatables.net', 'San Francisco', 30 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '11-Dec-2008', 7580, 't.mooney@datatables.net', 'London', 28 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Jackson', 'Bradshaw', 65, 'Director', 645750, '26-Sep-2008', 1042, 'j.bradshaw@datatables.net', 'New York', 34 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '03-Feb-2011', 2120, 'o.liang@datatables.net', 'Singapore', 4 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '03-May-2011', 6222, 'b.nash@datatables.net', 'London', 3 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '19-Aug-2009', 9383, 's.yamamoto@datatables.net', 'Tokyo', 31 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Thor', 'Walton', 61, 'Developer', 98540, '11-Aug-2013', 8327, 't.walton@datatables.net', 'New York', 11 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '07-Jul-2009', 2927, 'f.camacho@datatables.net', 'San Francisco', 10 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '09-Apr-2012', 8352, 's.baldwin@datatables.net', 'Singapore', 44 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '04-Jan-2010', 7439, 'z.frank@datatables.net', 'New York', 42 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '01-Jun-2012', 4389, 'z.serrano@datatables.net', 'San Francisco', 27 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '01-Feb-2013', 3431, 'j.acosta@datatables.net', 'Edinburgh', 49 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '06-Dec-2011', 3990, 'c.stevens@datatables.net', 'New York', 15 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Hermione', 'Butler', 47, 'Regional Director', 356250, '21-Mar-2011', 1016, 'h.butler@datatables.net', 'London', 9 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '27-Feb-2009', 6733, 'l.greer@datatables.net', 'London', 25 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Jonas', 'Alexander', 30, 'Developer', 86500, '14-Jul-2010', 8196, 'j.alexander@datatables.net', 'San Francisco', 33 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Shad', 'Decker', 51, 'Regional Director', 183000, '13-Nov-2008', 6373, 's.decker@datatables.net', 'Edinburgh', 43 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '27-Jun-2011', 5384, 'm.bruce@datatables.net', 'Singapore', 16 );
+INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Donna', 'Snider', 27, 'Customer Support', 112000, '25-Jan-2011', 4226, 'd.snider@datatables.net', 'New York', 19 );
+
+COMMIT;

examples/server_side/scripts/postgres.sql

@@ -10,7 +10,7 @@ CREATE TABLE datatables_demo (
 	position   text NOT NULL default '',
 	email      text NOT NULL default '',
 	office     text NOT NULL default '',
-	start_date timestamp without time zone default CURRENT_TIMESTAMP,
+	start_date timestamp without time zone default NULL,
 	age        integer,
 	salary     integer,
 	seq        integer,

examples/server_side/scripts/sqlite.sql

@@ -10,7 +10,7 @@ CREATE TABLE datatables_demo (
 	position   text NOT NULL default '',
 	email      text NOT NULL default '',
 	office     text NOT NULL default '',
-	start_date timestamp without time zone default CURRENT_TIMESTAMP,
+	start_date timestamp without time zone default NULL,
 	age        integer,
 	salary     integer,
 	seq        integer,

examples/server_side/scripts/sqlserver.sql

@@ -11,7 +11,7 @@ CREATE TABLE datatables_demo (
 	position   varchar(250) NOT NULL default '',
 	email      varchar(250) NOT NULL default '',
 	office     varchar(250) NOT NULL default '',
-	start_date datetime default GETDATE(),
+	start_date datetime default NULL,
 	age        int,
 	salary     int,
 	seq        int,