Adding Oracle demo SQL file

- Fixes DataTables/DataTables #836

.datatables-commit-sync

@@ -1 +1 @@
-12ff6f20233979ea09732932f6612b5ea0c04872
+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.

composer.json

@@ -1,6 +1,6 @@
 {
 	"name": "datatables/datatables",
-	"version": "1.10.11",
+	"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.11",
+	"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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -745,15 +746,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -736,15 +737,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +730,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

examples/advanced_init/dom_multiple_elements.html

@@ -19,7 +19,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +738,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

examples/advanced_init/dom_toolbar.html

@@ -17,7 +17,7 @@
 
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +740,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +744,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -728,15 +729,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -726,15 +727,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -726,15 +727,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -725,15 +726,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -725,15 +726,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -725,15 +726,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -751,15 +750,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

examples/advanced_init/row_callback.html

@@ -16,7 +16,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +739,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -790,15 +791,15 @@ tr.group:hover {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -745,15 +746,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -292,15 +293,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +278,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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() {
 				<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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -298,15 +297,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -267,15 +268,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +296,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -292,15 +291,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -306,15 +305,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -300,15 +299,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +278,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +298,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +738,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -747,15 +748,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -1532,15 +1536,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

examples/api/highlight.html

@@ -17,7 +17,7 @@ td.highlight {
 
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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,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>
@@ -559,7 +560,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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -743,15 +744,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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>

examples/api/multi_filter.html

@@ -17,7 +17,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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>
@@ -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>
@@ -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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -773,15 +774,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -774,15 +775,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -824,15 +826,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -376,15 +377,15 @@ tr.shown td.details-control {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -734,15 +737,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -749,15 +752,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -751,15 +753,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -320,15 +321,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +734,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +733,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +721,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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,8 +80,7 @@ $(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>
@@ -96,6 +88,7 @@ $(document).ready(function() {
 				<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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -775,15 +768,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +722,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

examples/basic_init/flexible_width.html

@@ -15,7 +15,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +723,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -743,15 +744,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +730,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -681,15 +682,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

examples/basic_init/multiple_tables.html

@@ -15,7 +15,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -434,15 +435,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

examples/basic_init/scroll_x.html

@@ -16,7 +16,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -892,15 +893,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

examples/basic_init/scroll_xy.html

@@ -16,7 +16,7 @@
 	}
 
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -890,15 +891,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -728,15 +729,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +725,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +728,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +723,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +716,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -266,15 +267,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +717,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -339,15 +340,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -269,15 +270,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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>
@@ -172,15 +172,15 @@
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="./styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -762,15 +764,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -1596,15 +1597,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -772,15 +774,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -755,15 +756,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -749,15 +750,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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

@@ -60,6 +60,11 @@
   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;
@@ -135,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;
 }
@@ -244,7 +249,6 @@
  * Dual licensed under the MIT and GPL licenses.
  */
 .syntaxhighlighter {
-  background-color: white !important;
   font-size: 13px !important;
   overflow: visible !important;
 }
@@ -269,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/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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -284,15 +285,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -352,15 +353,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -283,15 +284,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -276,15 +277,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -282,15 +283,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -513,15 +518,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -292,15 +293,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -392,15 +393,15 @@ tr.details td.details-control {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -309,15 +310,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

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.12.0.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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -268,15 +269,15 @@ $(document).ready(function() {
 							<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/semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="../styling/material.html">Material Design (Tech. preview)</a>
 							</li>

examples/styling/bootstrap.html

@@ -5,14 +5,14 @@
 	<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 3</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.12.0.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>
@@ -42,6 +42,7 @@ $(document).ready(function() {
 				<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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -725,15 +726,15 @@ $(document).ready(function() {
 							<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="./semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="./material.html">Material Design (Tech. preview)</a>
 							</li>

examples/styling/bootstrap4.html

@@ -5,14 +5,14 @@
 	<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.2/css/bootstrap.css">
+	<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.0.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>
@@ -42,6 +42,7 @@ $(document).ready(function() {
 				<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>
@@ -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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -559,7 +560,7 @@ $(document).ready(function() {
 					<ul>
 						<li>
 							<a href=
-							"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css">//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css</a>
+							"//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>
@@ -726,15 +727,15 @@ $(document).ready(function() {
 							<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="./semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="./material.html">Material Design (Tech. preview)</a>
 							</li>

examples/styling/cell-border.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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>
@@ -34,6 +34,7 @@ $(document).ready(function() {
 			<div class="info">
 				<p>This example shows DataTables with just the <code>cell-border</code> class specified, giving a strong delineation between individual cells.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="cell-border" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -529,7 +530,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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +712,15 @@ $(document).ready(function() {
 							<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="./semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="./material.html">Material Design (Tech. preview)</a>
 							</li>

examples/styling/compact.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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>
@@ -35,6 +35,7 @@ $(document).ready(function() {
 				<p>The <code>compact</code> class is used to reduce the amount of white-space the default styling for the DataTable uses, increasing the information density on
 				screen, as shown below.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display compact" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -530,7 +531,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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -712,15 +713,15 @@ $(document).ready(function() {
 							<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="./semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="./material.html">Material Design (Tech. preview)</a>
 							</li>

examples/styling/display.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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 <code>display</code> class is a short-cut for specifying the <code>stripe hover order-column row-border</code> as the class name for a table. This is shown
 				in the example below.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="display" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -541,7 +542,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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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,15 +724,15 @@ $(document).ready(function() {
 							<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="./semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="./material.html">Material Design (Tech. preview)</a>
 							</li>

examples/styling/foundation.html

@@ -12,7 +12,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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>
@@ -42,6 +42,7 @@ $(document).ready(function() {
 				<p>This integration is done simply by including the DataTables Foundation 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="display" 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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -726,15 +727,15 @@ $(document).ready(function() {
 							<li class="active">
 								<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="./semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="./material.html">Material Design (Tech. preview)</a>
 							</li>

examples/styling/hover.html

@@ -11,7 +11,7 @@
 	<style type="text/css" class="init">
 	
 	</style>
-	<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.0.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>
@@ -35,6 +35,7 @@ $(document).ready(function() {
 				<p>This example shows DataTables with just the <code>hover</code> class specified. This class will instruct DataTables' styling to highlight a row when the mouse
 				is hovered over it.</p>
 			</div>
+			<div class="demo-html"></div>
 			<table id="example" class="hover" cellspacing="0" width="100%">
 				<thead>
 					<tr>
@@ -530,7 +531,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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -712,15 +713,15 @@ $(document).ready(function() {
 							<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="./semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="./material.html">Material Design (Tech. preview)</a>
 							</li>

examples/styling/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.12.0.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>
@@ -65,15 +65,15 @@
 							<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="./semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="./material.html">Material Design (Tech. preview)</a>
 							</li>

examples/styling/jqueryUI.html

@@ -5,14 +5,14 @@
 	<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 - jQuery UI ThemeRoller</title>
-	<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
+	<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
 	<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.jqueryui.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.0.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() {
 				deprecated in DataTables 1.10 and will be removed DataTables 1.11, matching how styling integration is provided for other libraries - a more modular, maintainable
 				and extensible method. The method presented on this page is the method that will be use in future.</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.12.0.min.js">//code.jquery.com/jquery-1.12.0.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>
@@ -561,7 +562,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="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css</a>
+							<a href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css</a>
 						</li>
 						<li>
 							<a href="../../media/css/dataTables.jqueryui.css">../../media/css/dataTables.jqueryui.css</a>
@@ -728,15 +729,15 @@ $(document).ready(function() {
 							<li>
 								<a href="./foundation.html">Foundation</a>
 							</li>
+							<li>
+								<a href="./semanticui.html">Semantic UI</a>
+							</li>
 							<li class="active">
 								<a href="./jqueryUI.html">jQuery UI ThemeRoller</a>
 							</li>
 							<li>
 								<a href="./bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
 							</li>
-							<li>
-								<a href="./semanticui.html">Semantic UI (Tech. preview)</a>
-							</li>
 							<li>
 								<a href="./material.html">Material Design (Tech. preview)</a>
 							</li>