Adding Oracle demo SQL file

- Fixes DataTables/DataTables #836

.datatables-commit-sync

@@ -1 +1 @@
-9780a3693572757d87bf70e48bd7555faf974f28
+6382fb4a7fb36d8546b03217613c746e527f06be

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.10",
 	"main": [
 		"media/js/jquery.dataTables.js",
 		"media/css/jquery.dataTables.css",

composer.json

@@ -1,6 +1,6 @@
 {
 	"name": "datatables/datatables",
-	"version": "1.10.10",
+	"version": "1.10.13",
 	"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.10",
+	"version": "1.10.13",
 	"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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -55,6 +55,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -563,7 +564,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -740,14 +741,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -903,7 +916,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -50,6 +50,7 @@ $(document).ready(function() {
 				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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -554,7 +555,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -731,14 +732,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -894,7 +907,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/defaults.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -46,6 +46,7 @@ $(document).ready(function() {
 				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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -547,7 +548,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -724,14 +725,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -887,7 +900,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -19,7 +19,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -52,6 +52,7 @@ $(document).ready(function() {
 				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>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -549,7 +550,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -732,14 +733,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -895,7 +908,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -17,7 +17,7 @@
 
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -45,16 +45,18 @@ $(document).ready(function() {
 			<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -554,7 +556,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -733,14 +735,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -896,7 +910,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -54,7 +54,9 @@ $(document).ready(function() {
 				"//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>
+			<div class="demo-html">
+				<div id="demo_info" class="box"></div>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -560,7 +562,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -737,14 +739,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -900,7 +914,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -46,6 +46,7 @@ $(document).ready(function() {
 				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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -546,7 +547,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -723,14 +724,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -886,7 +899,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -13,7 +13,7 @@
 	th { white-space: nowrap; }
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -78,6 +78,7 @@ $(document).ready(function() {
 				"//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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -544,7 +545,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -721,14 +722,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -884,7 +897,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -49,6 +49,7 @@ $(document).ready(function() {
 				has abbreviated, but the full name is still searchable (search for "Bruno" for example). Additionally, although the last column contains non-numeric data in it,
 				the column will correctly order numerically as the <code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric data.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -76,7 +77,7 @@ $(document).ready(function() {
 						<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>
@@ -84,7 +85,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>
@@ -100,7 +101,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>
@@ -124,7 +125,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>
@@ -132,7 +133,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>
@@ -140,7 +141,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>
@@ -172,7 +173,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>
@@ -204,7 +205,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>
@@ -212,7 +213,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>
@@ -220,7 +221,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>
@@ -228,7 +229,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>
@@ -236,7 +237,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>
@@ -244,7 +245,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>
@@ -260,7 +261,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>
@@ -268,7 +269,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>
@@ -292,7 +293,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>
@@ -308,7 +309,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>
@@ -316,7 +317,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>
@@ -324,7 +325,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>
@@ -332,7 +333,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>
@@ -340,7 +341,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>
@@ -396,7 +397,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>
@@ -412,7 +413,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>
@@ -420,7 +421,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>
@@ -428,7 +429,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>
@@ -436,7 +437,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>
@@ -444,7 +445,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>
@@ -460,7 +461,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>
@@ -500,7 +501,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>
@@ -516,7 +517,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>
@@ -544,7 +545,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -721,14 +722,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -884,7 +897,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -48,6 +48,7 @@ $(document).ready(function() {
 				<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>
@@ -543,7 +544,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -720,14 +721,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -883,7 +896,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/advanced_init/index.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
 	<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 type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
 	</script>
@@ -90,7 +90,7 @@
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -44,6 +44,7 @@ $(document).ready(function() {
 				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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -543,7 +544,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -720,14 +721,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -883,7 +896,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -46,6 +46,7 @@ $(document).ready(function() {
 				</ul>
 				<p>The example below shows a 2D array being used to include a "Show all" records option.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -543,7 +544,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -720,14 +721,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -883,7 +896,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -52,8 +52,7 @@ $(document).ready(function() {
 				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": "...",
@@ -61,10 +60,10 @@ $(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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -569,7 +568,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -746,14 +745,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -909,7 +920,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -16,7 +16,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -48,10 +48,11 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -553,7 +554,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -733,14 +734,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -896,7 +909,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -16,7 +16,7 @@ tr.group:hover {
 }
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -78,6 +78,7 @@ $(document).ready(function() {
 				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>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -605,7 +606,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -785,14 +786,26 @@ tr.group:hover {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -948,7 +961,7 @@ tr.group:hover {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -59,6 +59,7 @@ $(document).ready(function() {
 				<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>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -563,7 +564,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -740,14 +741,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -903,7 +916,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -60,6 +60,7 @@ $(document).ready(function() {
 				"DataTables initialisation option">ajax.dataSrc</code></a> being used as an empty string. This tells DataTables that the JSON loaded is a plain array, not an
 				object with an array inside it as is the default.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -110,7 +111,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -287,14 +288,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -450,7 +463,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -53,6 +53,7 @@ $(document).ready(function() {
 				"string" title="String">demo</code> but it could be any value, included a nested property by using standard dotted Javascript object notation.</p>
 				<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -95,7 +96,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -272,14 +273,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -435,7 +448,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -43,7 +43,7 @@ $(document).ready(function() {
 		<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=
@@ -52,8 +52,7 @@ $(document).ready(function() {
 				<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",
@@ -65,9 +64,9 @@ $(document).ready(function() {
 		"5421"
 	]
 }
-</code>
-</pre>
+</code></pre>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -116,7 +115,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -293,14 +292,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -456,7 +467,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/defer_render.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -45,6 +45,7 @@ $(document).ready(function() {
 				<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll likely notice no difference, but larger tables can benefit
 				significantly from simply enabling this parameter.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -85,7 +86,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -262,14 +263,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -425,7 +438,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/index.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
 	<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 type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
 	</script>
@@ -68,7 +68,7 @@
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -64,6 +64,7 @@ $(document).ready(function() {
 				"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>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -113,7 +114,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -290,14 +291,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -453,7 +466,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/objects.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -50,8 +50,7 @@ $(document).ready(function() {
 				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",
@@ -59,10 +58,10 @@ $(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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -110,7 +109,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -287,14 +286,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -450,7 +461,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/objects_subarrays.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -60,8 +60,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"
@@ -74,9 +73,9 @@ $(document).ready(function() {
 	"office": "Edinburgh",
 	"extn": "5421"
 }
-</code>
-</pre>
+</code></pre>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -124,7 +123,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -301,14 +300,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -464,7 +475,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/orthogonal-data.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -53,8 +53,7 @@ $(document).ready(function() {
 				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",
@@ -65,9 +64,9 @@ $(document).ready(function() {
 	"office":	 "Edinburgh",
 	"extn":	   "5421"
 }
-</code>
-</pre>
+</code></pre>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -118,7 +117,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -295,14 +294,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -458,7 +469,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/ajax/simple.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -45,8 +45,7 @@ $(document).ready(function() {
 				"//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",
@@ -54,10 +53,10 @@ $(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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -97,7 +96,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -274,14 +273,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -437,7 +448,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/add_row.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -61,7 +61,10 @@ $(document).ready(function() {
 				<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>
+			</div>
+			<div class="demo-html">
+				<button id="addRow">Add new row</button>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -113,7 +116,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -290,14 +293,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -453,7 +468,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -53,6 +53,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -555,7 +556,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -732,14 +733,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -895,7 +908,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/counter_columns.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -57,6 +57,7 @@ $(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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -565,7 +566,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -742,14 +743,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -905,7 +918,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/form.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -48,10 +48,14 @@ $(document).ready(function() {
 				bit of additional work to get the information that is not in the document any longer.</p>
 				<p>The <a href="//datatables.net/reference/api/%24()"><code class="api" title="DataTables API method">$()</code></a> method can be used to get nodes from the
 				document regardless of paging, ordering etc. This example shows <a href="//datatables.net/reference/api/%24()"><code class="api" title=
-				"DataTables API method">$()</code></a> being used to get all <code class="tag" title="HTML tag">input</code> elements from the table.</p>
-				<p>In the example a simple <code>alert()</code> is used to show the information from the form, but an Ajax call to the server with the form data could easily be
-				performed.</p>
-			</div><button type="submit">Submit form</button>
+				"DataTables API method">$()</code></a> being used to get all <code class="tag" title="HTML tag">input</code> elements from the table. In the example a simple
+				<code>alert()</code> is used to show the information from the form, but an Ajax call to the server with the form data could easily be performed.</p>
+				<p>If you are interested in a complete CRUD editing suit for DataTables have a look at the <a href="//editor.datatables.net">Editor extension</a> which provides
+				simple setup and complete integration with DataTables.</p>
+			</div>
+			<div class="demo-html">
+				<button type="submit">Submit form</button>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -1350,7 +1354,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -1527,14 +1531,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -1690,7 +1706,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/highlight.html

@@ -17,7 +17,7 @@ td.highlight {
 
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -29,20 +29,14 @@ td.highlight {
 	
 
 $(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' );
 		} );
 } );
 
@@ -62,6 +56,7 @@ $(document).ready(function() {
 				"//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>
+			<div class="demo-html"></div>
 			<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -552,26 +547,20 @@ $(document).ready(function() {
 			<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -750,14 +739,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -913,7 +914,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/index.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
 	<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 type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
 	</script>
@@ -78,7 +78,7 @@
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/multi_filter.html

@@ -17,7 +17,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -31,7 +31,7 @@
 $(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+'" />' );
 	} );
 
@@ -72,6 +72,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -564,7 +565,7 @@ $(document).ready(function() {
 					<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
 	// 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;' );
 	} );
 
@@ -587,7 +588,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -768,14 +769,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -931,7 +944,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -76,6 +76,7 @@ $(document).ready(function() {
 				"//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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -592,7 +593,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -769,14 +770,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -932,7 +945,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/regex.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -69,60 +69,62 @@ $(document).ready(function() {
 				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>
+			<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" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -642,7 +644,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -819,14 +821,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -982,7 +996,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/row_details.html

@@ -19,7 +19,7 @@ tr.shown td.details-control {
 }
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -102,6 +102,7 @@ $(document).ready(function() {
 				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>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -188,7 +189,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -371,14 +372,26 @@ tr.shown td.details-control {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -534,7 +547,7 @@ tr.shown td.details-control {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/select_row.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -48,7 +48,10 @@ $(document).ready(function() {
 				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>
+			</div>
+			<div class="demo-html">
+				<button id="button">Row count</button>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -552,7 +555,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -729,14 +732,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -892,7 +907,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -57,7 +57,10 @@ $(document).ready(function() {
 				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>
+			</div>
+			<div class="demo-html">
+				<button id="button">Delete selected row</button>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -567,7 +570,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -744,14 +747,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -907,7 +922,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/api/show_hide.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -56,10 +56,12 @@ $(document).ready(function() {
 				<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>
 			</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%">
 				<thead>
@@ -569,7 +571,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -746,14 +748,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -909,7 +923,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -5,16 +5,16 @@
 	<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">
 	<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="//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 type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
-	<script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
+	<script type="text/javascript" language="javascript" src="//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>
@@ -62,6 +62,7 @@ $(document).ready(function() {
 				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">
@@ -129,10 +130,10 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.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>
+							<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">//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>
@@ -153,7 +154,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">//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>
@@ -315,14 +316,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -478,7 +491,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -37,13 +37,14 @@ $(document).ready(function() {
 				<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=
 				"//datatables.net/reference/option/language.paginate.first"><code class="option" title="DataTables initialisation option">language.paginate.first</code></a>,
@@ -53,6 +54,7 @@ $(document).ready(function() {
 				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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -550,7 +552,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -727,14 +729,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -890,7 +904,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -50,6 +50,7 @@ $(document).ready(function() {
 				required.</p>
 				<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the final column.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -550,7 +551,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -727,14 +728,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -890,7 +903,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -39,6 +39,7 @@ $(document).ready(function() {
 				"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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -538,7 +539,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -715,14 +716,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -878,7 +891,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/dom.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -56,29 +56,22 @@ $(document).ready(function() {
 					<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;
@@ -87,15 +80,15 @@ $(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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -593,7 +586,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -770,14 +763,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -933,7 +938,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -40,6 +40,7 @@ $(document).ready(function() {
 				options that can be used 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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -539,7 +540,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -716,14 +717,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -879,7 +892,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -15,7 +15,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -43,6 +43,7 @@ $(document).ready(function() {
 				<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
 				dynamically.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -538,7 +539,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -717,14 +718,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -880,7 +893,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -54,6 +54,7 @@ $(document).ready(function() {
 				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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -561,7 +562,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -738,14 +739,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -901,7 +914,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/index.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
 	<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 type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
 	</script>
@@ -90,7 +90,7 @@
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/basic_init/language.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -44,6 +44,7 @@ $(document).ready(function() {
 				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>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -547,7 +548,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -724,14 +725,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -887,7 +900,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -61,6 +61,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -499,7 +500,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -676,14 +677,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -839,7 +852,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -15,7 +15,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -44,6 +44,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -250,7 +251,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -429,14 +430,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -592,7 +605,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -16,7 +16,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -46,6 +46,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display nowrap" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -707,7 +708,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -887,14 +888,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -1050,7 +1063,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -16,7 +16,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -43,6 +43,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display nowrap" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -705,7 +706,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -885,14 +886,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -1048,7 +1061,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -47,6 +47,7 @@ $(document).ready(function() {
 				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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -546,7 +547,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -723,14 +724,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -886,7 +899,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -43,6 +43,7 @@ $(document).ready(function() {
 				<p>A relatively modern browser is <a href="http://caniuse.com/#feat=viewport-units">required for <code>vh</code> units</a> to operate correctly. IE9+ supports the
 				<code>vh</code> unit and all other evergreen browsers.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -542,7 +543,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -719,14 +720,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -882,7 +895,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -48,6 +48,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -545,7 +546,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -722,14 +723,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -885,7 +898,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -43,6 +43,7 @@ $(document).ready(function() {
 				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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -540,7 +541,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -717,14 +718,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -880,7 +893,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -38,6 +38,7 @@ $(document).ready(function() {
 				<code>$().DataTable();</code>.</p>
 				<p>Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -533,7 +534,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -710,14 +711,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -873,7 +886,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/data_sources/ajax.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -45,6 +45,7 @@ $(document).ready(function() {
 				<p>The example below shows DataTables loading data for a table from arrays as the data source (object parameters can also be used through the <a href=
 				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option ).</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -84,7 +85,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -261,14 +262,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -424,7 +437,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/data_sources/dom.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -39,6 +39,7 @@ $(document).ready(function() {
 				<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>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -534,7 +535,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -711,14 +712,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -874,7 +887,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/data_sources/index.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
 	<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 type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
 	</script>
@@ -58,7 +58,7 @@
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -92,6 +92,7 @@ $(document).ready(function() {
 				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>
@@ -157,7 +158,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -334,14 +335,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -497,7 +510,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -46,6 +46,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -87,7 +88,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -264,14 +265,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -427,7 +440,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/index.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
 	<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 type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="./resources/syntax/shCore.js">
 	</script>
@@ -167,14 +167,26 @@
 								<a href="./styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="./styling/bootstrap.html">Bootstrap</a>
+								<a href="./styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="./styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="./styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -330,7 +342,7 @@
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/plug-ins/api.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -63,7 +63,9 @@ $(document).ready(function() {
 				"//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"></div>
+			<div class="demo-html">
+				<div id="demo"></div>
+			</div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -580,7 +582,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -757,14 +759,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -920,7 +934,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/plug-ins/dom_sort.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -85,6 +85,7 @@ $(document).ready(function() {
 				"//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()</code></a> or <a href=
 				"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> methods.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -1414,7 +1415,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -1591,14 +1592,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -1754,7 +1767,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/plug-ins/index.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
 	<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 type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
 	</script>
@@ -56,7 +56,7 @@
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -62,16 +62,18 @@ $(document).ready(function() {
 				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>
+			<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" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -590,7 +592,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -767,14 +769,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -930,7 +944,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -60,6 +60,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -573,7 +574,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -750,14 +751,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -913,7 +926,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -58,6 +58,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -567,7 +568,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -744,14 +745,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -907,7 +920,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

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]);

examples/resources/syntax/shCore.css

@@ -59,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;
@@ -134,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;
 }
@@ -243,7 +249,6 @@
  * Dual licensed under the MIT and GPL licenses.
  */
 .syntaxhighlighter {
-  background-color: white !important;
   font-size: 13px !important;
   overflow: visible !important;
 }
@@ -268,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

@@ -303,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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -44,8 +44,8 @@ $(document).ready(function() {
 			<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>
@@ -54,6 +54,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -102,7 +103,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -279,14 +280,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -442,7 +455,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -48,6 +48,7 @@ $(document).ready(function() {
 				"//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>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -170,7 +171,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -347,14 +348,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -510,7 +523,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/ids.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -52,6 +52,7 @@ $(document).ready(function() {
 				"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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -101,7 +102,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -278,14 +279,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -441,7 +454,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/index.html

@@ -6,7 +6,7 @@
 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
 	<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 type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
 	</script>
@@ -75,7 +75,7 @@
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/jsonp.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -50,6 +50,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -94,7 +95,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -271,14 +272,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -434,7 +447,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -51,6 +51,7 @@ $(document).ready(function() {
 				"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> property given for each
 				column.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -100,7 +101,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -277,14 +278,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -440,7 +453,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/pipeline.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -111,7 +111,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 );
 				}
@@ -169,6 +171,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -289,7 +292,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 );
 				}
@@ -331,7 +336,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -508,14 +513,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -671,7 +688,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/post.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -58,6 +58,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -110,7 +111,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -287,14 +288,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -450,7 +463,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<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

@@ -19,7 +19,7 @@ tr.details td.details-control {
 }
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -113,6 +113,7 @@ $(document).ready(function() {
 				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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -204,7 +205,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -387,14 +388,26 @@ tr.details td.details-control {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -550,7 +563,7 @@ tr.details td.details-control {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

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 (SQL Server)
+--
+BEGIN
+	EditorDelObject('datatables_demo', 'TABLE');
+	EditorDelObject('datatables_demo_seq', 'SEQUENCE');
+END;
+
+CREATE TABLE datatables_demo (
+	id INT PRIMARY KEY NOT NULL,
+	first_name VARCHAR(250),
+	last_name  VARCHAR(250),
+	position   VARCHAR(250),
+	email      VARCHAR(250),
+	office     VARCHAR(250),
+	start_date DATE,
+	age        INT,
+	salary     INT,
+	seq        INT,
+	extn       VARCHAR(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,

examples/server_side/scripts/ssp.class.php

@@ -242,7 +242,7 @@ class SSP {
 
 		// Main query to actually get the data
 		$data = self::sql_exec( $db, $bindings,
-			"SELECT SQL_CALC_FOUND_ROWS `".implode("`, `", self::pluck($columns, 'db'))."`
+			"SELECT `".implode("`, `", self::pluck($columns, 'db'))."`
 			 FROM `$table`
 			 $where
 			 $order
@@ -250,8 +250,10 @@ class SSP {
 		);
 
 		// Data set length after filtering
-		$resFilterLength = self::sql_exec( $db,
-			"SELECT FOUND_ROWS()"
+		$resFilterLength = self::sql_exec( $db, $bindings,
+			"SELECT COUNT(`{$primaryKey}`)
+			 FROM   `$table`
+			 $where"
 		);
 		$recordsFiltered = $resFilterLength[0][0];
 
@@ -262,7 +264,6 @@ class SSP {
 		);
 		$recordsTotal = $resTotalLength[0][0];
 
-
 		/*
 		 * Output
 		 */
@@ -332,7 +333,7 @@ class SSP {
 
 		// Main query to actually get the data
 		$data = self::sql_exec( $db, $bindings,
-			"SELECT SQL_CALC_FOUND_ROWS `".implode("`, `", self::pluck($columns, 'db'))."`
+			"SELECT `".implode("`, `", self::pluck($columns, 'db'))."`
 			 FROM `$table`
 			 $where
 			 $order
@@ -340,8 +341,10 @@ class SSP {
 		);
 
 		// Data set length after filtering
-		$resFilterLength = self::sql_exec( $db,
-			"SELECT FOUND_ROWS()"
+		$resFilterLength = self::sql_exec( $db, $bindings,
+			"SELECT COUNT(`{$primaryKey}`)
+			 FROM   `$table`
+			 $where"
 		);
 		$recordsFiltered = $resFilterLength[0][0];
 
@@ -436,7 +439,7 @@ class SSP {
 		}
 
 		// Return all
-		return $stmt->fetchAll();
+		return $stmt->fetchAll( PDO::FETCH_BOTH );
 	}
 
 

examples/server_side/select_rows.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -66,6 +66,7 @@ $(document).ready(function() {
 				<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>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -127,7 +128,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -304,14 +305,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -467,7 +480,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/server_side/simple.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js">
+	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -45,6 +45,7 @@ $(document).ready(function() {
 				"//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 client-side processing examples, but in this instance using server-side processing.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -86,7 +87,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -263,14 +264,26 @@ $(document).ready(function() {
 								<a href="../styling/stripe.html">Base style - stripe</a>
 							</li>
 							<li>
-								<a href="../styling/bootstrap.html">Bootstrap</a>
+								<a href="../styling/bootstrap.html">Bootstrap 3</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/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -426,7 +439,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/styling/bootstrap.html

@@ -4,15 +4,15 @@
 	<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">
-	<title>DataTables example - Bootstrap</title>
-	<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
+	<title>DataTables example - Bootstrap 3</title>
+	<link rel="stylesheet" type="text/css" href="//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 type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
 	</script>
 	<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
 	</script>
@@ -33,15 +33,16 @@ $(document).ready(function() {
 <body class="dt-example dt-example-bootstrap">
 	<div class="container">
 		<section>
-			<h1>DataTables example <span>Bootstrap</span></h1>
+			<h1>DataTables example <span>Bootstrap 3</span></h1>
 			<div class="info">
-				<p>DataTables can integrate seamlessly with <a href="http://getbootstrap.com/">Bootstrap</a> using Bootstrap's <a href="http://getbootstrap.com/css/#tables">table
-				styling options</a> to present a consistent interface with your Bootstrap driven site / app.</p>
+				<p>DataTables can integrate seamlessly with <a href="http://getbootstrap.com/">Bootstrap 3</a> using Bootstrap's <a href=
+				"http://getbootstrap.com/css/#tables">table styling options</a> to present an interface with a uniform design, based on Bootstrap, for your site / app.</p>
 				<p>DataTables' Bootstrap integration also provides a renderer for the pagination control in DataTables to ensure that the pagination of the table is also styled
 				consistently by Bootstrap.</p>
 				<p>This integration is done simply by including the DataTables Bootstrap files (CSS and JS) which will set the defaults needed for DataTables to be initialised as
 				normal, as shown in this examples.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -537,7 +538,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
 						</li>
 						<li>
 							<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@@ -558,7 +559,7 @@ $(document).ready(function() {
 					<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>
+							<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">//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>
@@ -720,14 +721,26 @@ $(document).ready(function() {
 								<a href="./stripe.html">Base style - stripe</a>
 							</li>
 							<li class="active">
-								<a href="./bootstrap.html">Bootstrap</a>
+								<a href="./bootstrap.html">Bootstrap 3</a>
 							</li>
 							<li>
 								<a href="./foundation.html">Foundation</a>
 							</li>
+							<li>
+								<a href="./semanticui.html">Semantic UI</a>
+							</li>
 							<li>
 								<a href="./jqueryUI.html">jQuery UI ThemeRoller</a>
 							</li>
+							<li>
+								<a href="./bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="./material.html">Material Design (Tech. preview)</a>
+							</li>
+							<li>
+								<a href="./uikit.html">UIKit (Tech. preview)</a>
+							</li>
 						</ul>
 					</div>
 					<div class="toc-group">
@@ -883,7 +896,7 @@ $(document).ready(function() {
 					<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
 					Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
 					"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
-					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2015<br>
+					<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
 					DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
 				</div>
 			</div>

examples/styling/bootstrap4.html

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