rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2024-11-28 10:24:10 +01:00
Code Issues Releases Activity

Avoid applying padding to non sortable items on small tables

Browse Source 
I don't know if there are more to this or if it would break some other rules but as of my testing it should be fine to remove this rule for headers that have no sorting applied to them.

This is the case already for "normal sized" tables as the padding-right rule is only applied if there is a sorting class to the element. But it has been forgotten for the table-sm variant. So there are two options that I can see.

Specify this rule does not apply if there is a sorting_disabled class
Do the same as what was done for the normal sized table in the following commit: 4e611f31ff
This commit is contained in:
Allan Jardine 2020-05-21 09:24:54 +00:00
parent 9f1d1a7f49
commit 6e51a62684
151 changed files with 1946 additions and 2306 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.datatables-commit-sync
View File

@ -1 +1 @@
67abd45d6995d914a0f4c6eb06f9ec1c4f8035dd 8f9daac0fedf3de08b191c663e2ccbcccdb6ae44

2
composer.json
View File

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

2
dataTables.jquery.json
View File

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

34
examples/advanced_init/column_render.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Column rendering</title> <title>DataTables example - Column rendering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -52,7 +52,7 @@ $(document).ready(function() {
assigning colours based on content rules and any other form of text manipulation you require.</p> assigning colours based on content rules and any other form of text manipulation you require.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -63,6 +63,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -251,7 +261,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -307,7 +317,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -521,16 +531,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -560,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -755,7 +755,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

36
examples/advanced_init/complex_header.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Complex headers with column visibility</title> <title>DataTables example - Complex headers with column visibility</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -37,7 +37,7 @@ $(document).ready(function() {
<div class="info"> <div class="info">
<p>Complex headers (using <code>colspan</code> / <code>rowspan</code>) can be used to group columns of similar information in DataTables, creating a very powerful <p>Complex headers (using <code>colspan</code> / <code>rowspan</code>) can be used to group columns of similar information in DataTables, creating a very powerful
visual effect.</p> visual effect.</p>
<p>In addition to the basic behaviour, DataTables can also take <code>colspan</code> and <code>rowspan</code> into account when working with hidden columns. The <p>In addition to the basic behaviour, DataTables can also take <code>colspan</code> and <code>rowspan</code>s into account when working with hidden columns. The
<code>colspan</code> and <code>rowspan</code> attributes for each cell are automatically calculated and rendered on the page for you. This allows the <a href= <code>colspan</code> and <code>rowspan</code> attributes for each cell are automatically calculated and rendered on the page for you. This allows the <a href=
"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a> option and <a href= "//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a> option and <a href=
"//datatables.net/reference/api/column().visible()"><code class="api" title="DataTables API method">column().visible()</code></a> method to take into account "//datatables.net/reference/api/column().visible()"><code class="api" title="DataTables API method">column().visible()</code></a> method to take into account
@ -47,7 +47,7 @@ $(document).ready(function() {
<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> <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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th rowspan="2">Name</th> <th rowspan="2">Name</th>
@ -62,6 +62,16 @@ $(document).ready(function() {
<th>E-mail</th> <th>E-mail</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -251,7 +261,7 @@ $(document).ready(function() {
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>$85,600</td> <td>$85,600</td>
<td>Sydney</td> <td>Sidney</td>
<td>3023</td> <td>3023</td>
<td>d.wilder@datatables.net</td> <td>d.wilder@datatables.net</td>
</tr> </tr>
@ -307,7 +317,7 @@ $(document).ready(function() {
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>$95,400</td> <td>$95,400</td>
<td>Sydney</td> <td>Sidney</td>
<td>2769</td> <td>2769</td>
<td>m.house@datatables.net</td> <td>m.house@datatables.net</td>
</tr> </tr>
@ -520,16 +530,6 @@ $(document).ready(function() {
<td>d.snider@datatables.net</td> <td>d.snider@datatables.net</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -551,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -746,7 +746,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/advanced_init/defaults.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Setting defaults</title> <title>DataTables example - Setting defaults</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -43,7 +43,7 @@ $(document).ready(function() {
<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> <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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -54,6 +54,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -242,7 +252,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -298,7 +308,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -512,16 +522,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -544,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -739,7 +739,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

36
examples/advanced_init/dom_multiple_elements.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Multiple table control elements</title> <title>DataTables example - Multiple table control elements</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -19,7 +19,7 @@
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -46,10 +46,10 @@ $(document).ready(function() {
"DataTables initialisation option">dom</code></a> to create multiple instances of these table controls. Simply include the feature's identification letter where "DataTables initialisation option">dom</code></a> to create multiple instances of these table controls. Simply include the feature's identification letter where
you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table (<code class="string" title="String">t</code>) you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table (<code class="string" title="String">t</code>)
should be included only once).</p> should be included only once).</p>
<p>This is shown in the demo below where the four key built-in features are duplicated above and below the table.</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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -60,6 +60,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -248,7 +258,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -304,7 +314,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -518,16 +528,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -546,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -747,7 +747,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/advanced_init/dom_toolbar.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Custom toolbar elements</title> <title>DataTables example - Custom toolbar elements</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -17,7 +17,7 @@
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -53,7 +53,7 @@ $(document).ready(function() {
Excel / PDF, and more).</p> Excel / PDF, and more).</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -64,6 +64,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -252,7 +262,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -308,7 +318,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -522,16 +532,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -552,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -749,7 +749,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/advanced_init/dt_events.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - DataTables events</title> <title>DataTables example - DataTables events</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -53,7 +53,7 @@ $(document).ready(function() {
<div class="demo-html"> <div class="demo-html">
<div id="demo_info" class="box"></div> <div id="demo_info" class="box"></div>
</div> </div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -64,6 +64,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -252,7 +262,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -308,7 +318,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -522,16 +532,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -558,7 +558,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -753,7 +753,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/advanced_init/events_live.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - DOM / jQuery events</title> <title>DataTables example - DOM / jQuery events</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -43,7 +43,7 @@ $(document).ready(function() {
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> 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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -54,6 +54,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -242,7 +252,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -298,7 +308,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -512,16 +522,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -543,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -738,7 +738,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

26
examples/advanced_init/footer_callback.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Footer callback</title> <title>DataTables example - Footer callback</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -13,7 +13,7 @@
th { white-space: nowrap; } th { white-space: nowrap; }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -75,7 +75,7 @@ $(document).ready(function() {
footer.</p> footer.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -85,6 +85,12 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th colspan="4" style="text-align:right">Total:</th>
<th></th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger</td> <td>Tiger</td>
@ -251,7 +257,7 @@ $(document).ready(function() {
<td>Doris</td> <td>Doris</td>
<td>Wilder</td> <td>Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>$85,600</td> <td>$85,600</td>
</tr> </tr>
<tr> <tr>
@ -300,7 +306,7 @@ $(document).ready(function() {
<td>Michelle</td> <td>Michelle</td>
<td>House</td> <td>House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>$95,400</td> <td>$95,400</td>
</tr> </tr>
<tr> <tr>
@ -486,12 +492,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th colspan="4" style="text-align:right">Total:</th>
<th></th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -541,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -736,7 +736,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/advanced_init/html5-data-attributes.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - HTML5 data-* attributes - cell data</title> <title>DataTables example - HTML5 data-* attributes - cell data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -46,7 +46,7 @@ $(document).ready(function() {
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> 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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -57,6 +57,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td data-search="Tiger Nixon">T. Nixon</td> <td data-search="Tiger Nixon">T. Nixon</td>
@ -245,7 +255,7 @@ $(document).ready(function() {
<tr> <tr>
<td data-search="Doris Wilder">D. Wilder</td> <td data-search="Doris Wilder">D. Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td data-order="1284940800">Mon 20th Sep 10</td> <td data-order="1284940800">Mon 20th Sep 10</td>
<td data-order="85600">$85,600/y</td> <td data-order="85600">$85,600/y</td>
@ -301,7 +311,7 @@ $(document).ready(function() {
<tr> <tr>
<td data-search="Michelle House">M. House</td> <td data-search="Michelle House">M. House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td data-order="1306972800">Thu 2nd Jun 11</td> <td data-order="1306972800">Thu 2nd Jun 11</td>
<td data-order="95400">$95,400/y</td> <td data-order="95400">$95,400/y</td>
@ -515,16 +525,6 @@ $(document).ready(function() {
<td data-order="112000">$112,000/y</td> <td data-order="112000">$112,000/y</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -541,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -736,7 +736,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

14
examples/advanced_init/html5-data-options.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - HTML5 data-* attributes - table options</title> <title>DataTables example - HTML5 data-* attributes - table options</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -33,9 +33,9 @@ $(document).ready(function() {
<p>As of DataTables 1.10.5 it is now possible to define <a href="//datatables.net/reference/option">initialisation options</a> using HTML5 <code>data-*</code> <p>As of DataTables 1.10.5 it is now possible to define <a href="//datatables.net/reference/option">initialisation options</a> using HTML5 <code>data-*</code>
attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the
<code>data-*</code> attributes taking priority).</p> <code>data-*</code> attributes taking priority).</p>
<p>Please note that the attribute values must contain valid JSON data or a Javascript primitive, as required by <a href= <p>Please note that the attribute values must contain valid JSON data or a Javascript primitive (as require by <a href=
"http://api.jquery.com/data/#data-html5">jQuery's <code>$().data()</code> method</a>. This means that double quotes should be used inside the attribute if needed "http://api.jquery.com/data/#data-html5">jQuery's <code>$().data()</code> method</a> - this means that double quotes should be used inside the attribute if needed
for a string (see the <code>data-order</code> in this example).</p> for a string (see the <code>data-order</code> example below).</p>
<p>Additionally, jQuery will convert a dashed string into the camel-case notation used by DataTables for its options. For example <code>data-page-length</code> is <p>Additionally, jQuery will convert a dashed string into the camel-case notation used by DataTables for its options. For example <code>data-page-length</code> is
used to represent <a href="//datatables.net/reference/option/pageLength"><code class="option" title="DataTables initialisation option">pageLength</code></a>.</p> used to represent <a href="//datatables.net/reference/option/pageLength"><code class="option" title="DataTables initialisation option">pageLength</code></a>.</p>
<p>The table below shows the use of <a href="//datatables.net/reference/option/pageLength"><code class="option" title= <p>The table below shows the use of <a href="//datatables.net/reference/option/pageLength"><code class="option" title=
@ -540,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -735,7 +735,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

4
examples/advanced_init/index.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <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/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css"> <link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Advanced initialisation</title> <title>DataTables examples - Advanced initialisation</title>

34
examples/advanced_init/language_file.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Language file</title> <title>DataTables example - Language file</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -41,7 +41,7 @@ $(document).ready(function() {
<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> <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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -52,6 +52,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -240,7 +250,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -296,7 +306,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -510,16 +520,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -540,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -735,7 +735,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/advanced_init/length_menu.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Page length options</title> <title>DataTables example - Page length options</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -43,7 +43,7 @@ $(document).ready(function() {
<p>The example below shows a 2D array being used to include a "Show all" records option.</p> <p>The example below shows a 2D array being used to include a "Show all" records option.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -54,6 +54,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -242,7 +252,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -298,7 +308,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -512,16 +522,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -540,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -735,7 +735,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/advanced_init/object_dom_read.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Read HTML to data objects</title> <title>DataTables example - Read HTML to data objects</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -60,7 +60,7 @@ $(document).ready(function() {
<p>Please note that this feature requires DataTables 1.10.3 or newer.</p> <p>Please note that this feature requires DataTables 1.10.3 or newer.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -71,6 +71,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -259,7 +269,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -315,7 +325,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -529,16 +539,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -564,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -759,7 +759,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/advanced_init/row_callback.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row created callback</title> <title>DataTables example - Row created callback</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -16,7 +16,7 @@
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -49,7 +49,7 @@ $(document).ready(function() {
"DataTables initialisation option">columns.createdCell</code></a> could also be used to create exactly the same effect.</p> "DataTables initialisation option">columns.createdCell</code></a> could also be used to create exactly the same effect.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -60,6 +60,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -248,7 +258,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -304,7 +314,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -518,16 +528,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -550,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -748,7 +748,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

60
examples/advanced_init/row_grouping.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row grouping</title> <title>DataTables example - Row grouping</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -16,7 +16,7 @@ tr.group:hover {
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -24,19 +24,18 @@ tr.group:hover {
$(document).ready(function() { $(document).ready(function() {
var groupColumn = 2;
var table = $('#example').DataTable({ var table = $('#example').DataTable({
"columnDefs": [ "columnDefs": [
{ "visible": false, "targets": groupColumn } { "visible": false, "targets": 2 }
], ],
"order": [[ groupColumn, 'asc' ]], "order": [[ 2, 'asc' ]],
"displayLength": 25, "displayLength": 25,
"drawCallback": function ( settings ) { "drawCallback": function ( settings ) {
var api = this.api(); var api = this.api();
var rows = api.rows( {page:'current'} ).nodes(); var rows = api.rows( {page:'current'} ).nodes();
var last=null; var last=null;
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) { api.column(2, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) { if ( last !== group ) {
$(rows).eq( i ).before( $(rows).eq( i ).before(
'<tr class="group"><td colspan="5">'+group+'</td></tr>' '<tr class="group"><td colspan="5">'+group+'</td></tr>'
@ -51,11 +50,11 @@ $(document).ready(function() {
// Order by the grouping // Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () { $('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0]; var currentOrder = table.order()[0];
if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) { if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
table.order( [ groupColumn, 'desc' ] ).draw(); table.order( [ 2, 'desc' ] ).draw();
} }
else { else {
table.order( [ groupColumn, 'asc' ] ).draw(); table.order( [ 2, 'asc' ] ).draw();
} }
} ); } );
} ); } );
@ -81,7 +80,7 @@ $(document).ready(function() {
new sites that make use of row grouping, it is suggested that you use the new RowGroup extension.</p> new sites that make use of row grouping, it is suggested that you use the new RowGroup extension.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -92,6 +91,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -280,7 +289,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -336,7 +345,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -550,16 +559,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -571,19 +570,18 @@ $(document).ready(function() {
<div class="tabs"> <div class="tabs">
<div class="js"> <div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() { <p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var groupColumn = 2;
var table = $('#example').DataTable({ var table = $('#example').DataTable({
&quot;columnDefs&quot;: [ &quot;columnDefs&quot;: [
{ &quot;visible&quot;: false, &quot;targets&quot;: groupColumn } { &quot;visible&quot;: false, &quot;targets&quot;: 2 }
], ],
&quot;order&quot;: [[ groupColumn, 'asc' ]], &quot;order&quot;: [[ 2, 'asc' ]],
&quot;displayLength&quot;: 25, &quot;displayLength&quot;: 25,
&quot;drawCallback&quot;: function ( settings ) { &quot;drawCallback&quot;: function ( settings ) {
var api = this.api(); var api = this.api();
var rows = api.rows( {page:'current'} ).nodes(); var rows = api.rows( {page:'current'} ).nodes();
var last=null; var last=null;
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) { api.column(2, {page:'current'} ).data().each( function ( group, i ) {
if ( last !== group ) { if ( last !== group ) {
$(rows).eq( i ).before( $(rows).eq( i ).before(
'&lt;tr class=&quot;group&quot;&gt;&lt;td colspan=&quot;5&quot;&gt;'+group+'&lt;/td&gt;&lt;/tr&gt;' '&lt;tr class=&quot;group&quot;&gt;&lt;td colspan=&quot;5&quot;&gt;'+group+'&lt;/td&gt;&lt;/tr&gt;'
@ -598,18 +596,18 @@ $(document).ready(function() {
// Order by the grouping // Order by the grouping
$('#example tbody').on( 'click', 'tr.group', function () { $('#example tbody').on( 'click', 'tr.group', function () {
var currentOrder = table.order()[0]; var currentOrder = table.order()[0];
if ( currentOrder[0] === groupColumn &amp;&amp; currentOrder[1] === 'asc' ) { if ( currentOrder[0] === 2 &amp;&amp; currentOrder[1] === 'asc' ) {
table.order( [ groupColumn, 'desc' ] ).draw(); table.order( [ 2, 'desc' ] ).draw();
} }
else { else {
table.order( [ groupColumn, 'asc' ] ).draw(); table.order( [ 2, 'asc' ] ).draw();
} }
} ); } );
} );</code> } );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -807,7 +805,7 @@ tr.group:hover {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

36
examples/advanced_init/sort_direction_control.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Order direction sequence control</title> <title>DataTables example - Order direction sequence control</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -53,10 +53,10 @@ $(document).ready(function() {
<li>Column 6 - default ordering</li> <li>Column 6 - default ordering</li>
</ul> </ul>
<p>It's worth noting that I don't have a good use case for when you might what to mix such complex ordering behaviour into a single table, but the example shows <p>It's worth noting that I don't have a good use case for when you might what to mix such complex ordering behaviour into a single table, but the example shows
how these options can be used and therefore applied across all columns.</p> how these options can be use and therefore applied across all columns.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -67,6 +67,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -255,7 +265,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -311,7 +321,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -525,16 +535,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -560,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -755,7 +755,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

10
examples/ajax/custom_data_flat.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Flat array data source</title> <title>DataTables example - Flat array data source</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -57,7 +57,7 @@ $(document).ready(function() {
object with an array inside it as is the default.</p> object with an array inside it as is the default.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -107,7 +107,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -302,7 +302,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

14
examples/ajax/custom_data_property.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Custom data source property</title> <title>DataTables example - Custom data source property</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -34,7 +34,7 @@ $(document).ready(function() {
<h1>DataTables example <span>Custom data source property</span></h1> <h1>DataTables example <span>Custom data source property</span></h1>
<div class="info"> <div class="info">
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g. <p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
<code>{ "data": [...] }</code>). This can easily be changed by using the <code>dataSrc</code> option of the <a href= <code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p> "//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number <p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
of ways in which it can be used:</p> of ways in which it can be used:</p>
@ -46,11 +46,11 @@ $(document).ready(function() {
</ul> </ul>
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title= <p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
"DataTables initialisation option">ajax.dataSrc</code></a> being used as a string to get the data from a different source property, in this case <code class= "DataTables initialisation option">ajax.dataSrc</code></a> being used as a string to get the data from a different source property, in this case <code class=
"string" title="String">demo</code>, but it could be any value, including a nested property using standard dotted Javascript object notation.</p> "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> <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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -92,7 +92,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -287,7 +287,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

4
examples/ajax/data/arrays.txt
View File

@ -187,7 +187,7 @@
[ [
"Doris Wilder", "Doris Wilder",
"Sales Assistant", "Sales Assistant",
"Sydney", "Sidney",
"3023", "3023",
"2010\/09\/20", "2010\/09\/20",
"$85,600" "$85,600"
@ -243,7 +243,7 @@
[ [
"Michelle House", "Michelle House",
"Integration Specialist", "Integration Specialist",
"Sydney", "Sidney",
"2769", "2769",
"2011\/06\/02", "2011\/06\/02",
"$95,400" "$95,400"

4
examples/ajax/data/arrays_custom_prop.txt
View File

@ -187,7 +187,7 @@
[ [
"Doris Wilder", "Doris Wilder",
"Sales Assistant", "Sales Assistant",
"Sydney", "Sidney",
"3023", "3023",
"2010\/09\/20", "2010\/09\/20",
"$85,600" "$85,600"
@ -243,7 +243,7 @@
[ [
"Michelle House", "Michelle House",
"Integration Specialist", "Integration Specialist",
"Sydney", "Sidney",
"2769", "2769",
"2011\/06\/02", "2011\/06\/02",
"$95,400" "$95,400"

4
examples/ajax/data/arrays_subobjects.txt
View File

@ -284,7 +284,7 @@
"start_date": "2010\/09\/20" "start_date": "2010\/09\/20"
}, },
"contact": { "contact": {
"office": "Sydney", "office": "Sidney",
"extn": "3023" "extn": "3023"
} }
}, },
@ -368,7 +368,7 @@
"start_date": "2011\/06\/02" "start_date": "2011\/06\/02"
}, },
"contact": { "contact": {
"office": "Sydney", "office": "Sidney",
"extn": "2769" "extn": "2769"
} }
}, },

4
examples/ajax/data/objects.txt
View File

@ -213,7 +213,7 @@
"position": "Sales Assistant", "position": "Sales Assistant",
"salary": "$85,600", "salary": "$85,600",
"start_date": "2010\/09\/20", "start_date": "2010\/09\/20",
"office": "Sydney", "office": "Sidney",
"extn": "3023" "extn": "3023"
}, },
{ {
@ -276,7 +276,7 @@
"position": "Integration Specialist", "position": "Integration Specialist",
"salary": "$95,400", "salary": "$95,400",
"start_date": "2011\/06\/02", "start_date": "2011\/06\/02",
"office": "Sydney", "office": "Sidney",
"extn": "2769" "extn": "2769"
}, },
{ {

4
examples/ajax/data/objects_deep.txt
View File

@ -284,7 +284,7 @@
"start_date": "2010\/09\/20" "start_date": "2010\/09\/20"
}, },
"contact": [ "contact": [
"Sydney", "Sidney",
"3023" "3023"
] ]
}, },
@ -368,7 +368,7 @@
"start_date": "2011\/06\/02" "start_date": "2011\/06\/02"
}, },
"contact": [ "contact": [
"Sydney", "Sidney",
"2769" "2769"
] ]
}, },

4
examples/ajax/data/objects_root_array.txt
View File

@ -212,7 +212,7 @@
"position": "Sales Assistant", "position": "Sales Assistant",
"salary": "$85,600", "salary": "$85,600",
"start_date": "2010\/09\/20", "start_date": "2010\/09\/20",
"office": "Sydney", "office": "Sidney",
"extn": "3023" "extn": "3023"
}, },
{ {
@ -275,7 +275,7 @@
"position": "Integration Specialist", "position": "Integration Specialist",
"salary": "$95,400", "salary": "$95,400",
"start_date": "2011\/06\/02", "start_date": "2011\/06\/02",
"office": "Sydney", "office": "Sidney",
"extn": "2769" "extn": "2769"
}, },
{ {

4
examples/ajax/data/objects_subarrays.txt
View File

@ -309,7 +309,7 @@
"$85,600", "$85,600",
"2010\/09\/20" "2010\/09\/20"
], ],
"office": "Sydney", "office": "Sidney",
"extn": "3023" "extn": "3023"
}, },
{ {
@ -400,7 +400,7 @@
"$95,400", "$95,400",
"2011\/06\/02" "2011\/06\/02"
], ],
"office": "Sydney", "office": "Sidney",
"extn": "2769" "extn": "2769"
}, },
{ {

4
examples/ajax/data/orthogonal.txt
View File

@ -261,7 +261,7 @@
"display": "Mon 20th Sep 10", "display": "Mon 20th Sep 10",
"timestamp": "1284940800" "timestamp": "1284940800"
}, },
"office": "Sydney", "office": "Sidney",
"extn": "3023" "extn": "3023"
}, },
{ {
@ -338,7 +338,7 @@
"display": "Thu 2nd Jun 11", "display": "Thu 2nd Jun 11",
"timestamp": "1306972800" "timestamp": "1306972800"
}, },
"office": "Sydney", "office": "Sidney",
"extn": "2769" "extn": "2769"
}, },
{ {

10
examples/ajax/deep.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Nested object data (objects)</title> <title>DataTables example - Nested object data (objects)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -63,7 +63,7 @@ $(document).ready(function() {
</code></pre> </code></pre>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -111,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -306,7 +306,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

10
examples/ajax/defer_render.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Deferred rendering for speed</title> <title>DataTables example - Deferred rendering for speed</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -42,7 +42,7 @@ $(document).ready(function() {
significantly from simply enabling this parameter.</p> significantly from simply enabling this parameter.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -82,7 +82,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -277,7 +277,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

4
examples/ajax/index.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <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/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css"> <link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Ajax sourced data</title> <title>DataTables examples - Ajax sourced data</title>

12
examples/ajax/null_data_source.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Generated content for a column</title> <title>DataTables example - Generated content for a column</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -58,10 +58,10 @@ $(document).ready(function() {
bit of information about it in an <code>alert</code> box. This is a simple use case, but it can be built up to be arbitrarily complex.</p> bit of information about it in an <code>alert</code> box. This is a simple use case, but it can be built up to be arbitrarily complex.</p>
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option" title= <p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data</code></a> option for the column has been set to <code>null</code> to indicate that the column has no information "DataTables initialisation option">columns.data</code></a> option for the column has been set to <code>null</code> to indicate that the column has no information
contained in the data source object.</p> that should be obtained data source object.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -110,7 +110,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -305,7 +305,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

10
examples/ajax/objects.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ajax data source (objects)</title> <title>DataTables example - Ajax data source (objects)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -58,7 +58,7 @@ $(document).ready(function() {
<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> <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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -105,7 +105,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -300,7 +300,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

10
examples/ajax/objects_subarrays.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Nested object data (arrays)</title> <title>DataTables example - Nested object data (arrays)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -72,7 +72,7 @@ $(document).ready(function() {
</code></pre> </code></pre>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -119,7 +119,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -314,7 +314,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

10
examples/ajax/orthogonal-data.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Orthogonal data</title> <title>DataTables example - Orthogonal data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -63,7 +63,7 @@ $(document).ready(function() {
</code></pre> </code></pre>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -113,7 +113,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -308,7 +308,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

12
examples/ajax/simple.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ajax data source (arrays)</title> <title>DataTables example - Ajax data source (arrays)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -37,7 +37,7 @@ $(document).ready(function() {
advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title= advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for further information.</p> "DataTables initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for further information.</p>
<p>By default DataTables will assume that an array data source is to be used and will read the information to be displayed in each column from the row's array <p>By default DataTables will assume that an array data source is to be used and will read the information to be displayed in each column from the row's array
using the column index, making working with arrays very simple (note that this can be changed, or objects may use the <a href= using the column index, making working with arrays very simple (note that this can be changed, or objects used may using the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, shown in other "//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, shown in other
examples).</p> 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> <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>
@ -53,7 +53,7 @@ $(document).ready(function() {
<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> <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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -92,7 +92,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -287,7 +287,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

24
examples/api/add_row.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Add rows</title> <title>DataTables example - Add rows</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -46,22 +46,22 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>Add rows</span></h1> <h1>DataTables example <span>Add rows</span></h1>
<div class="info"> <div class="info">
<p>New rows can be added to a DataTable using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title= <p>New rows can be added to a DataTable very easily using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
"DataTables API method">row.add()</code></a> API method. Simply call the API function with the data for the new row (be it an array or object). Multiple rows can "DataTables API method">row.add()</code></a> API method. Simply call the API function with the data that is to be used for the new row (be it an array or object).
be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a> method (note the Multiple rows can be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a>
plural). Data can likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title= method (note the plural). Data can be likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title=
"DataTables API method">row().data()</code></a> and <a href="//datatables.net/reference/api/row().remove()"><code class="api" title= "DataTables API method">row().data()</code></a> and <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
"DataTables API method">row().remove()</code></a> methods.</p> "DataTables API method">row().remove()</code></a> methods.</p>
<p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title= <p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API employs.</p> "DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API makes use of.</p>
<p>This example shows a single row being added each time the button below is clicked upon.</p> <p>This example shows a single row being added each time the button below is clicked upon.</p>
<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls to a DataTable, including creating, editing and deleting <p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls, including creating, editing and deleting rows, to a
rows.</p> DataTable.</p>
</div> </div>
<div class="demo-html"> <div class="demo-html">
<button id="addRow">Add new row</button> <button id="addRow">Add new row</button>
</div> </div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Column 1</th> <th>Column 1</th>
@ -112,7 +112,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -307,7 +307,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/api/api_in_init.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Using API in callbacks</title> <title>DataTables example - Using API in callbacks</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -50,7 +50,7 @@ $(document).ready(function() {
shows the use of the API inside the callbacks!</p> shows the use of the API inside the callbacks!</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -61,6 +61,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -249,7 +259,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -305,7 +315,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -519,16 +529,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -552,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -747,7 +747,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

36
examples/api/counter_columns.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Index column</title> <title>DataTables example - Index column</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -43,7 +43,7 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>Index column</span></h1> <h1>DataTables example <span>Index column</span></h1>
<div class="info"> <div class="info">
<p>Highly-interactive tables often require a 'counter' column that contains the position for each row in the table. This column should not be sortable, and will <p>Highly-interactive tables often require a 'counter' column that contains the position in the table for each row. This column should not be sortable, and will
change dynamically as the ordering and searching applied to the table is altered by the end user.</p> change dynamically as the ordering and searching applied to the table is altered by the end user.</p>
<p>This example shows how this can be achieved with DataTables, where the first column is the counter column, and is updated when ordering or searching occurs. <p>This example shows how this can be achieved with DataTables, where the first column is the counter column, and is updated when ordering or searching occurs.
This is done by listening for the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order</code></a> and <a href= This is done by listening for the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order</code></a> and <a href=
@ -54,7 +54,7 @@ $(document).ready(function() {
"DataTables API method">column()</code></a> method to get the nodes in the current order and with the currently applied filter.</p> "DataTables API method">column()</code></a> method to get the nodes in the current order and with the currently applied filter.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@ -65,6 +65,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td></td> <td></td>
@ -254,7 +264,7 @@ $(document).ready(function() {
<td></td> <td></td>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>$85,600</td> <td>$85,600</td>
</tr> </tr>
@ -310,7 +320,7 @@ $(document).ready(function() {
<td></td> <td></td>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>$95,400</td> <td>$95,400</td>
</tr> </tr>
@ -523,16 +533,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -562,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -757,7 +757,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

40
examples/api/form.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Form inputs</title> <title>DataTables example - Form inputs</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -19,12 +19,7 @@
$(document).ready(function() { $(document).ready(function() {
var table = $('#example').DataTable({ var table = $('#example').DataTable();
columnDefs: [{
orderable: false,
targets: [1,2,3]
}]
});
$('button').click( function() { $('button').click( function() {
var data = table.$('input, select').serialize(); var data = table.$('input, select').serialize();
@ -57,7 +52,7 @@ $(document).ready(function() {
<div class="demo-html"> <div class="demo-html">
<button type="submit">Submit form</button> <button type="submit">Submit form</button>
</div> </div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -66,6 +61,14 @@ $(document).ready(function() {
<th>Office</th> <th>Office</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -1322,14 +1325,6 @@ $(document).ready(function() {
</select></td> </select></td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -1341,12 +1336,7 @@ $(document).ready(function() {
<div class="tabs"> <div class="tabs">
<div class="js"> <div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() { <p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var table = $('#example').DataTable({ var table = $('#example').DataTable();
columnDefs: [{
orderable: false,
targets: [1,2,3]
}]
});
$('button').click( function() { $('button').click( function() {
var data = table.$('input, select').serialize(); var data = table.$('input, select').serialize();
@ -1360,7 +1350,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -1555,7 +1545,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

40
examples/api/highlight.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Highlighting rows and columns</title> <title>DataTables example - Highlighting rows and columns</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -17,7 +17,7 @@ td.highlight {
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -44,16 +44,16 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>Highlighting rows and columns</span></h1> <h1>DataTables example <span>Highlighting rows and columns</span></h1>
<div class="info"> <div class="info">
<p>Highlighting rows and columns can be useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow columns. <p>Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow
Highlighting a row is easy using CSS, but for column highlighting, you need to use a little bit of Javascript.</p> columns. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
<p>This example shows DataTables making use of the <a href="//datatables.net/reference/api/cell().index()"><code class="api" title= <p>This example shows that in action on DataTable by making use of the <a href="//datatables.net/reference/api/cell().index()"><code class="api" title=
"DataTables API method">cell().index()</code></a> method to get the index of the column that is to be operated on, and then the <a href= "DataTables API method">cell().index()</code></a> method to get the index of the column that is to be operated on, and then the <a href=
"//datatables.net/reference/api/cells().nodes()"><code class="api" title="DataTables API method">cells().nodes()</code></a> and <a href= "//datatables.net/reference/api/cells().nodes()"><code class="api" title="DataTables API method">cells().nodes()</code></a> and <a href=
"//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()</code></a> methods to remove old classes and "//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> apply the new highlighted class, respectively.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="row-border hover order-column" style="width:100%"> <table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -64,6 +64,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -252,7 +262,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -308,7 +318,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -522,16 +532,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -556,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -753,7 +753,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

4
examples/api/index.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <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/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css"> <link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - API</title> <title>DataTables examples - API</title>

44
examples/api/multi_filter.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Individual column searching (text inputs)</title> <title>DataTables example - Individual column searching (text inputs)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -17,7 +17,7 @@
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -38,7 +38,7 @@ $(document).ready(function() {
table.columns().every( function () { table.columns().every( function () {
var that = this; var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () { $( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) { if ( that.search() !== this.value ) {
that that
.search( this.value ) .search( this.value )
@ -56,10 +56,10 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>Individual column searching (text inputs)</span></h1> <h1>DataTables example <span>Individual column searching (text inputs)</span></h1>
<div class="info"> <div class="info">
<p>The searching functionality provided by DataTables is useful for quickly search through the information in the table - however the search is global, and you may <p>The searching functionality that is provided by DataTables is very useful for quickly search through the information in the table - however the search is
wish to present controls that search on specific columns.</p> global, and you may wish to present controls to search on specific columns only.</p>
<p>DataTables has the ability to apply searching to a specific column through the <a href="//datatables.net/reference/api/column().search()"><code class="api" <p>DataTables has the ability to apply searching to a specific column through the <a href="//datatables.net/reference/api/column().search()"><code class="api"
title="DataTables API method">column().search()</code></a> method (note that the name of the method is <code>search</code> not <code>filter</code>, since <a href= title="DataTables API method">column().search()</code></a> method (note that the name of the method is <code>search</code> not <code>filter</code> since <a href=
"//datatables.net/reference/api/filter()"><code class="api" title="DataTables API method">filter()</code></a> is used to apply a filter to a result set).</p> "//datatables.net/reference/api/filter()"><code class="api" title="DataTables API method">filter()</code></a> is used to apply a filter to a result set).</p>
<p>The column searches are cumulative, so you can apply multiple individual column searches, in addition to the global search, allowing complex searching options <p>The column searches are cumulative, so you can apply multiple individual column searches, in addition to the global search, allowing complex searching options
to be presented to the user.</p> to be presented to the user.</p>
@ -69,7 +69,7 @@ $(document).ready(function() {
"DataTables API method">column()</code></a> method takes into account any hidden columns when selecting the column to act upon.</p> "DataTables API method">column()</code></a> method takes into account any hidden columns when selecting the column to act upon.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -80,6 +80,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -268,7 +278,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -324,7 +334,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -538,16 +548,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -572,7 +572,7 @@ $(document).ready(function() {
table.columns().every( function () { table.columns().every( function () {
var that = this; var that = this;
$( 'input', this.footer() ).on( 'keyup change clear', function () { $( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) { if ( that.search() !== this.value ) {
that that
.search( this.value ) .search( this.value )
@ -584,7 +584,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -783,7 +783,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

53
examples/api/multi_filter_select.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Individual column searching (select inputs)</title> <title>DataTables example - Individual column searching (select inputs)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -53,30 +53,27 @@ $(document).ready(function() {
<div class="info"> <div class="info">
<p>This example is almost identical to text based individual column example and provides the same functionality, but in this case using <code class="tag" title= <p>This example is almost identical to text based individual column example and provides the same functionality, but in this case using <code class="tag" title=
"HTML tag">select</code> input controls.</p> "HTML tag">select</code> input controls.</p>
<p>After the table is initialised, the API is used to build the <code class="tag" title="HTML tag">select</code> inputs through the use of <a href= <p>After the table is initialised, the API is used to build the <code class="tag" title="HTML tag">select</code> inputs through the use of the <a href=
"//datatables.net/reference/api/columns().every()"><code class="api" title="DataTables API method">columns().every()</code></a> to loop over the columns (the "//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()</code></a> method to get the data for each column
<a href="//datatables.net/reference/api/columns()"><code class="api" title="DataTables API method">columns()</code></a> selector can also be used to limit the in turn. The helper methods <a href="//datatables.net/reference/api/unique()"><code class="api" title="DataTables API method">unique()</code></a> and <a href=
selected columns if required), then the <a href="//datatables.net/reference/api/column().data()"><code class="api" title=
"DataTables API method">column().data()</code></a> method is used to get the data for each column in turn. The helper methods <a href=
"//datatables.net/reference/api/unique()"><code class="api" title="DataTables API method">unique()</code></a> and <a href=
"//datatables.net/reference/api/sort()"><code class="api" title="DataTables API method">sort()</code></a> are also used to reduce the data for set input to unique "//datatables.net/reference/api/sort()"><code class="api" title="DataTables API method">sort()</code></a> are also used to reduce the data for set input to unique
and ordered elements. Finally the <code>change</code> event from the <code class="tag" title="HTML tag">select</code> input is used to trigger a column search and ordered elements. Finally the <code>change</code> event from the <code class="tag" title="HTML tag">select</code> input is used to trigger a column search
using the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method.</p> using the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method.</p>
<p>Note that the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method in <p>Note that the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method in
this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built-in smart searching. For more information this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built in smart searching. For more information
on the search options in DataTables API, please refer to the documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title= on the search options in DataTables API please refer to the documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
"DataTables API method">search()</code></a>, <a href="//datatables.net/reference/api/column().search()"><code class="api" title= "DataTables API method">search()</code></a>, <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
"DataTables API method">column().search()</code></a> and <a href="//datatables.net/reference/api/%24.fn.dataTable.util.escapeRegex()"><code class="api" title= "DataTables API method">column().search()</code></a> and <a href="//datatables.net/reference/api/%24.fn.dataTable.util.escapeRegex()"><code class="api" title=
"DataTables API method">$.fn.dataTable.util.escapeRegex()</code></a> which are used for searching globally, by column and escaping regular expressions "DataTables API method">$.fn.dataTable.util.escapeRegex()</code></a> which are used for searching globally, by column and escaping regular expressions
respectively.</p> respectively.</p>
<p>Also note this example demonstrates the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title= <p>Note also that this example shows the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
"DataTables initialisation option">initComplete</code></a>, a callback function triggered when the table has fully loaded. Use of this callback isn't required in "DataTables initialisation option">initComplete</code></a> a callback function that is triggered when the table has fully loaded. Use of this callback isn't
this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href= actually required in this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a> is useful to execute code "//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> after the data has been loaded.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -87,6 +84,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -275,7 +282,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -331,7 +338,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -545,16 +552,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -592,7 +589,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -787,7 +784,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/api/regex.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Search API (regular expressions)</title> <title>DataTables example - Search API (regular expressions)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -121,7 +121,7 @@ $(document).ready(function() {
</tbody> </tbody>
</table> </table>
</div> </div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -132,6 +132,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -320,7 +330,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -376,7 +386,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -590,16 +600,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -640,7 +640,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -835,7 +835,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

22
examples/api/row_details.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Child rows (show extra / detailed information)</title> <title>DataTables example - Child rows (show extra / detailed information)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -19,7 +19,7 @@ tr.shown td.details-control {
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -89,17 +89,17 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1> <h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
<div class="info"> <div class="info">
<p>The DataTables API has a number of methods for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional information <p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional
about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p> information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a> <p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a>
methods to first check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title= methods to firstly check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
"DataTables API method">row().child.hide()</code></a>), otherwise show it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title= "DataTables API method">row().child.hide()</code></a>), otherwise show it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title=
"DataTables API method">row().child.show()</code></a>). The content of the child row in this example is defined by the <code>format()</code> function, but you "DataTables API method">row().child.show()</code></a>). The content of the child row is, in this example, defined by the <code>formatDetails()</code> function, but
would replace that with whatever content you wanted to show, possibly including, for example, <a href="https://www.datatables.net/blog/2017-03-31">an Ajax call to 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
the server</a> to obtain any extra information.</p> information to show.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@ -185,7 +185,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -386,7 +386,7 @@ tr.shown td.details-control {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

46
examples/api/select_row.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row selection (multiple rows)</title> <title>DataTables example - Row selection (multiple rows)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -38,17 +38,17 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>Row selection (multiple rows)</span></h1> <h1>DataTables example <span>Row selection (multiple rows)</span></h1>
<div class="info"> <div class="info">
<p>It can be useful to provide the user with the option to select rows in a DataTable. This can be done by using a click event to add / remove a class on the table <p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done by simply using a click event to add /
rows. The <a href="//datatables.net/reference/api/rows().data()"><code class="api" title="DataTables API method">rows().data()</code></a> method can then be used remove a class on the table rows. The <a href="//datatables.net/reference/api/rows().data()"><code class="api" title=
to get the data for the selected rows. In this case it is simply counting the number of selected rows, but much more complex interactions can easily be "DataTables API method">rows().data()</code></a> method can then be used to get the data for the selected rows. In this case it is simply counting the number of
developed.</p> selected rows, but much more complex interactions can easily be developed.</p>
<p>If you are looking for a more complete and easier to use row selection option, the <a href="https://datatables.net/extras/select">Select extension</a> provides <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>
an API that is fully integrated with DataTables for selecting rows and acting upon that secletion.</p> provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
</div> </div>
<div class="demo-html"> <div class="demo-html">
<button id="button">Row count</button> <button id="button">Row count</button>
</div> </div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -59,6 +59,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -247,7 +257,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -303,7 +313,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -517,16 +527,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -551,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -746,7 +746,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

47
examples/api/select_single_row.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row selection and deletion (single row)</title> <title>DataTables example - Row selection and deletion (single row)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -44,19 +44,20 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>Row selection and deletion (single row)</span></h1> <h1>DataTables example <span>Row selection and deletion (single row)</span></h1>
<div class="info"> <div class="info">
<p>This example modifies the multiple row selection example by only allowing the selection of a single row. This is done by checking to see if the row already has <p>This example shows a modification of the multiple row selection example, where just a single can now be selected. This is done simply by checking to see if the
a selected class, and if so removing it, but if not then the class is removed from all other rows in the table and then applied to the row being selected.</p> row already has a selected class or not, and if so removing it, if not then the class is removed from any other row in the table which does have it and applied to
the row to be selected.</p>
<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title="DataTables API method">row().remove()</code></a> method which <p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title="DataTables API method">row().remove()</code></a> method which
deletes a row from a table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method with will delete a row from a table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method
<code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be with <code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be
reset to the first page).</p> reset to the first page).</p>
<p>If you are looking for a more complete and easier to use row selection option, the <a href="https://datatables.net/extras/select">Select extension</a> provides <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>
an API that is fully integrated with DataTables for selecting rows and acting upon that selection.</p> provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
</div> </div>
<div class="demo-html"> <div class="demo-html">
<button id="button">Delete selected row</button> <button id="button">Delete selected row</button>
</div> </div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -67,6 +68,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -255,7 +266,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -311,7 +322,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -525,16 +536,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -760,7 +761,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

44
examples/api/show_hide.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Show / hide columns dynamically</title> <title>DataTables example - Show / hide columns dynamically</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -45,12 +45,12 @@ $(document).ready(function() {
<div class="info"> <div class="info">
<p>This example shows how you can make use of the <a href="//datatables.net/reference/api/column().visible()"><code class="api" title= <p>This example shows how you can make use of the <a href="//datatables.net/reference/api/column().visible()"><code class="api" title=
"DataTables API method">column().visible()</code></a> API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it "DataTables API method">column().visible()</code></a> API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it
enabled with this API method, although it's not required for the API function to work.</p> enabled with this API method, although that is not required for the API function to work.</p>
<p>In addition, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api" title= <p>In addition to this, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api"
"DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href= title="DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href=
"//datatables.net/reference/api/columns().visible()"><code class="api" title="DataTables API method">columns().visible()</code></a> method to set their state.</p> "//datatables.net/reference/api/columns().visible()"><code class="api" title="DataTables API method">columns().visible()</code></a> method to set their state.</p>
<p>If you are looking for a more complete column visibility interaction controls, the <a href="https://datatables.net/extras/buttons">Buttons extension for <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
DataTables</a> provides a comprehensive module for column visibility control.</p> for DataTables</a> provides a comprehensive module for column visibility control.</p>
</div> </div>
<div class="demo-html"> <div class="demo-html">
<div> <div>
@ -59,7 +59,7 @@ $(document).ready(function() {
"5">Salary</a> "5">Salary</a>
</div> </div>
</div> </div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -70,6 +70,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -258,7 +268,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -314,7 +324,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -528,16 +538,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -567,7 +567,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -762,7 +762,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

17
examples/api/tabs_and_scrolling.html
View File

@ -3,17 +3,17 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scrolling and Bootstrap tabs</title> <title>DataTables example - Scrolling and Bootstrap tabs</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="//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="../../media/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css"> <link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script type="text/javascript" language="javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/dataTables.bootstrap.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/dataTables.bootstrap.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
@ -124,10 +124,10 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js</a> <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>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -148,8 +148,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> <p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul> <ul>
<li> <li>
<a href= <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>
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css</a>
</li> </li>
<li> <li>
<a href="../../media/css/dataTables.bootstrap.css">../../media/css/dataTables.bootstrap.css</a> <a href="../../media/css/dataTables.bootstrap.css">../../media/css/dataTables.bootstrap.css</a>
@ -329,7 +328,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

36
examples/basic_init/alt_pagination.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Alternative pagination</title> <title>DataTables example - Alternative pagination</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -42,7 +42,7 @@ $(document).ready(function() {
<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">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> <li><code class="string" title="String">first_last_numbers</code> - 'First' and 'Last' buttons, plus page numbers</li>
</ul> </ul>
<p>The language strings of 'First', 'Previous' etc can be optionally changed through the internationalisation options of DataTables; <a href= <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>, "//datatables.net/reference/option/language.paginate.first"><code class="option" title="DataTables initialisation option">language.paginate.first</code></a>,
<a href="//datatables.net/reference/option/language.paginate.previous"><code class="option" title= <a href="//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
"DataTables initialisation option">language.paginate.previous</code></a> etc.</p> "DataTables initialisation option">language.paginate.previous</code></a> etc.</p>
@ -51,7 +51,7 @@ $(document).ready(function() {
<p>The example below shows the <code class="string" title="String">full_numbers</code> type of pagination.</p> <p>The example below shows the <code class="string" title="String">full_numbers</code> type of pagination.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -62,6 +62,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -250,7 +260,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -306,7 +316,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -520,16 +530,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -548,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -743,7 +743,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/basic_init/comma-decimal.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Language - Comma decimal place</title> <title>DataTables example - Language - Comma decimal place</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -47,7 +47,7 @@ $(document).ready(function() {
<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the final column.</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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -58,6 +58,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -246,7 +256,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85.600,00</td> <td>$85.600,00</td>
@ -302,7 +312,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95.400,00</td> <td>$95.400,00</td>
@ -516,16 +526,6 @@ $(document).ready(function() {
<td>$112.000,00</td> <td>$112.000,00</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -547,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -742,7 +742,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/basic_init/complex_header.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Complex headers (rowspan and colspan)</title> <title>DataTables example - Complex headers (rowspan and colspan)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -36,7 +36,7 @@ $(document).ready(function() {
<p>The example shown below has two sets of grouped information, grouped by colspan in the header.</p> <p>The example shown below has two sets of grouped information, grouped by colspan in the header.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th rowspan="2">Name</th> <th rowspan="2">Name</th>
@ -51,6 +51,16 @@ $(document).ready(function() {
<th>E-mail</th> <th>E-mail</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -240,7 +250,7 @@ $(document).ready(function() {
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>$85,600</td> <td>$85,600</td>
<td>Sydney</td> <td>Sidney</td>
<td>3023</td> <td>3023</td>
<td>d.wilder@datatables.net</td> <td>d.wilder@datatables.net</td>
</tr> </tr>
@ -296,7 +306,7 @@ $(document).ready(function() {
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>$95,400</td> <td>$95,400</td>
<td>Sydney</td> <td>Sidney</td>
<td>2769</td> <td>2769</td>
<td>m.house@datatables.net</td> <td>m.house@datatables.net</td>
</tr> </tr>
@ -509,16 +519,6 @@ $(document).ready(function() {
<td>d.snider@datatables.net</td> <td>d.snider@datatables.net</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Salary</th>
<th>Office</th>
<th>Extn.</th>
<th>E-mail</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -535,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -730,7 +730,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/basic_init/dom.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - DOM positioning</title> <title>DataTables example - DOM positioning</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -85,7 +85,7 @@ $(document).ready(function() {
<code>div</code>.</p> <code>div</code>.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -96,6 +96,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -284,7 +294,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -340,7 +350,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -554,16 +564,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -582,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -777,7 +777,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

38
examples/basic_init/filter_only.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Feature enable / disable</title> <title>DataTables example - Feature enable / disable</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -32,12 +32,12 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>Feature enable / disable</span></h1> <h1>DataTables example <span>Feature enable / disable</span></h1>
<div class="info"> <div class="info">
<p>Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. The full list of <p>Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. A full list of the
available options is <a href="https://datatables.net/reference/option">available in the DataTables reference</a>.</p> 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> <p>In the following example only the search feature is left enabled (which it is by default).</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -48,6 +48,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -236,7 +246,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -292,7 +302,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -506,16 +516,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -536,7 +536,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -731,7 +731,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

36
examples/basic_init/flexible_width.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Flexible table width</title> <title>DataTables example - Flexible table width</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -15,7 +15,7 @@
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -36,11 +36,11 @@ $(document).ready(function() {
presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the <code>width</code> presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the <code>width</code>
attribute to the HTML table tag or inline width style (<code>style="width:100%"</code>), it will be used as the width for the table (overruling any CSS attribute to the HTML table tag or inline width style (<code>style="width:100%"</code>), it will be used as the width for the table (overruling any CSS
styles).</p> styles).</p>
<p>This example shows a table with <code>width="80%"</code> and the container is also flexible width, so as the window is resized, the table will also resize <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> dynamically.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -51,6 +51,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -239,7 +249,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -295,7 +305,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -509,16 +519,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -535,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -732,7 +732,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/basic_init/hidden_columns.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Hidden columns</title> <title>DataTables example - Hidden columns</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -51,7 +51,7 @@ $(document).ready(function() {
<p>In the table below both the office and age version columns have been hidden, the former is not searchable, the latter is.</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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -62,6 +62,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -250,7 +260,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -306,7 +316,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -520,16 +530,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -558,7 +558,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -753,7 +753,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

6
examples/basic_init/index.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <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/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css"> <link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Basic initialisation</title> <title>DataTables examples - Basic initialisation</title>
@ -16,7 +16,7 @@
<section> <section>
<h1>DataTables example <span>Basic initialisation</span></h1> <h1>DataTables example <span>Basic initialisation</span></h1>
<div class="info"> <div class="info">
<p>DataTables is a simple-to-use jQuery plug-in with a huge range of customisable options. The examples in this section demonstrate basic initialisation of <p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The examples in this section demonstrate basic initialisation of
DataTables and how it can be easily customised by passing an object with the options you want.</p> DataTables and how it can be easily customised by passing an object with the options you want.</p>
</div> </div>
</section> </section>

36
examples/basic_init/language.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Language options</title> <title>DataTables example - Language options</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -38,10 +38,10 @@ $(document).ready(function() {
<div class="info"> <div class="info">
<p>Changing the language information displayed by DataTables is as simple as passing in a <a href="//datatables.net/reference/option/language"><code class="option" <p>Changing the language information displayed by DataTables is as simple as passing in a <a href="//datatables.net/reference/option/language"><code class="option"
title="DataTables initialisation option">language</code></a> object to the DataTable constructor.</p> title="DataTables initialisation option">language</code></a> object to the DataTable constructor.</p>
<p>This example shows a different set of English string being used, rather than the defaults.</p> <p>The example above shows a different set of English string being used, rather than the defaults.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -52,6 +52,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -240,7 +250,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -296,7 +306,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -510,16 +520,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -544,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -739,7 +739,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

14
examples/basic_init/multi_col_sort.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Multi-column ordering</title> <title>DataTables example - Multi-column ordering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -58,7 +58,7 @@ $(document).ready(function() {
directly to the first and the salary column to the first name column.</p> directly to the first and the salary column to the first name column.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -234,7 +234,7 @@ $(document).ready(function() {
<td>Doris</td> <td>Doris</td>
<td>Wilder</td> <td>Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>$85,600</td> <td>$85,600</td>
</tr> </tr>
<tr> <tr>
@ -283,7 +283,7 @@ $(document).ready(function() {
<td>Michelle</td> <td>Michelle</td>
<td>House</td> <td>House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>$95,400</td> <td>$95,400</td>
</tr> </tr>
<tr> <tr>
@ -496,7 +496,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -691,7 +691,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

48
examples/basic_init/multiple_tables.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Multiple tables</title> <title>DataTables example - Multiple tables</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -15,7 +15,7 @@
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -41,7 +41,7 @@ $(document).ready(function() {
which have the class of <code>table.display</code> (which is suitable in this example, you might wish to use a different selector).</p> 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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="" class="display" style="width:100%"> <table id="" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -51,6 +51,15 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -116,17 +125,8 @@ $(document).ready(function() {
<td>$183,000</td> <td>$183,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<table id="" class="display" style="width:100%"> <table id="" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -136,6 +136,15 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Jena Gaines</td> <td>Jena Gaines</td>
@ -222,15 +231,6 @@ $(document).ready(function() {
<td>$103,500</td> <td>$103,500</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -247,7 +247,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -444,7 +444,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

14
examples/basic_init/scroll_x.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - horizontal</title> <title>DataTables example - Scroll - horizontal</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -16,7 +16,7 @@
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -43,7 +43,7 @@ $(document).ready(function() {
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> 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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display nowrap" style="width:100%"> <table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -315,7 +315,7 @@ $(document).ready(function() {
<td>Doris</td> <td>Doris</td>
<td>Wilder</td> <td>Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -392,7 +392,7 @@ $(document).ready(function() {
<td>Michelle</td> <td>Michelle</td>
<td>House</td> <td>House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -704,7 +704,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -902,7 +902,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

14
examples/basic_init/scroll_xy.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - horizontal and vertical</title> <title>DataTables example - Scroll - horizontal and vertical</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -16,7 +16,7 @@
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -40,7 +40,7 @@ $(document).ready(function() {
the scrolling accounts for this.</p> the scrolling accounts for this.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display nowrap" style="width:100%"> <table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -312,7 +312,7 @@ $(document).ready(function() {
<td>Doris</td> <td>Doris</td>
<td>Wilder</td> <td>Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -389,7 +389,7 @@ $(document).ready(function() {
<td>Michelle</td> <td>Michelle</td>
<td>House</td> <td>House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -702,7 +702,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -900,7 +900,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/basic_init/scroll_y.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - vertical</title> <title>DataTables example - Scroll - vertical</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -44,7 +44,7 @@ $(document).ready(function() {
"DataTables initialisation option">scrollY</code></a>.</p> "DataTables initialisation option">scrollY</code></a>.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -55,6 +55,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -243,7 +253,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -299,7 +309,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -513,16 +523,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -543,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -738,7 +738,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/basic_init/scroll_y_dynamic.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Scroll - vertical, dynamic height</title> <title>DataTables example - Scroll - vertical, dynamic height</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -40,7 +40,7 @@ $(document).ready(function() {
<code>vh</code> unit and all other evergreen browsers.</p> <code>vh</code> unit and all other evergreen browsers.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -51,6 +51,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -239,7 +249,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -295,7 +305,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -509,16 +519,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -539,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -734,7 +734,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/basic_init/state_save.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - State saving</title> <title>DataTables example - State saving</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -45,7 +45,7 @@ $(document).ready(function() {
"DataTables initialisation option">stateSave</code></a> option.</p> "DataTables initialisation option">stateSave</code></a> option.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -56,6 +56,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -244,7 +254,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -300,7 +310,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -514,16 +524,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -542,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -737,7 +737,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/basic_init/table_sorting.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Default ordering (sorting)</title> <title>DataTables example - Default ordering (sorting)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -40,7 +40,7 @@ $(document).ready(function() {
<p>The table below is ordered (descending) by the Age column.</p> <p>The table below is ordered (descending) by the Age column.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -51,6 +51,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -239,7 +249,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -295,7 +305,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -509,16 +519,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -537,7 +537,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -732,7 +732,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/basic_init/zero_configuration.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Zero configuration</title> <title>DataTables example - Zero configuration</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -35,7 +35,7 @@ $(document).ready(function() {
<p>Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.</p> <p>Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -46,6 +46,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -234,7 +244,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -290,7 +300,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -504,16 +514,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -530,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -725,7 +725,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

10
examples/data_sources/ajax.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ajax sourced data</title> <title>DataTables example - Ajax sourced data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -42,7 +42,7 @@ $(document).ready(function() {
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option ).</p> "//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option ).</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -81,7 +81,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -276,7 +276,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

36
examples/data_sources/dom.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - HTML (DOM) sourced data</title> <title>DataTables example - HTML (DOM) sourced data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -33,10 +33,10 @@ $(document).ready(function() {
<p>The foundation for DataTables is progressive enhancement, so it is very adept at reading table information directly from the DOM. This example shows how easy it <p>The foundation for DataTables is progressive enhancement, so it is very adept at reading table information directly from the DOM. This example shows how easy it
is to add searching, ordering and paging to your HTML table by simply running DataTables on it.</p> is to add searching, ordering and paging to your HTML table by simply running DataTables on it.</p>
<p>For further and more complex examples of using DataTables with DOM sourced data, please refer to the <a href="../basic_init">basic initialisation</a> and <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 initialisation</a> examples.</p> <a href="../advanced_init">advanced</a> examples.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -47,6 +47,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -235,7 +245,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -291,7 +301,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -505,16 +515,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -531,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -726,7 +726,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

8
examples/data_sources/index.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <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/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css"> <link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Data sources</title> <title>DataTables examples - Data sources</title>
@ -23,8 +23,8 @@
<li>Ajax sourced data with client-side processing</li> <li>Ajax sourced data with client-side processing</li>
<li>Ajax sourced data with server-side processing</li> <li>Ajax sourced data with server-side processing</li>
</ul> </ul>
<p>Which of these options is used to populate the table data depends upon how the table is initialised. The examples in this section show these four different data <p>Which of these options is used to populate the table with data depends upon how the table is initialised. The examples in this section show these four different
source types.</p> data source types.</p>
</div> </div>
</section> </section>
</div> </div>

16
examples/data_sources/js_array.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Javascript sourced data</title> <title>DataTables example - Javascript sourced data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -42,14 +42,14 @@ var dataSet = [
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ], [ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ], [ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ], [ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
[ "Doris Wilder", "Sales Assistant", "Sydney", "3023", "2010/09/20", "$85,600" ], [ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ], [ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ], [ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ], [ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ], [ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ], [ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ], [ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
[ "Michelle House", "Integration Specialist", "Sydney", "2769", "2011/06/02", "$95,400" ], [ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ], [ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ], [ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ], [ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
@ -123,14 +123,14 @@ $(document).ready(function() {
[ &quot;Jenette Caldwell&quot;, &quot;Development Lead&quot;, &quot;New York&quot;, &quot;1937&quot;, &quot;2011/09/03&quot;, &quot;$345,000&quot; ], [ &quot;Jenette Caldwell&quot;, &quot;Development Lead&quot;, &quot;New York&quot;, &quot;1937&quot;, &quot;2011/09/03&quot;, &quot;$345,000&quot; ],
[ &quot;Yuri Berry&quot;, &quot;Chief Marketing Officer (CMO)&quot;, &quot;New York&quot;, &quot;6154&quot;, &quot;2009/06/25&quot;, &quot;$675,000&quot; ], [ &quot;Yuri Berry&quot;, &quot;Chief Marketing Officer (CMO)&quot;, &quot;New York&quot;, &quot;6154&quot;, &quot;2009/06/25&quot;, &quot;$675,000&quot; ],
[ &quot;Caesar Vance&quot;, &quot;Pre-Sales Support&quot;, &quot;New York&quot;, &quot;8330&quot;, &quot;2011/12/12&quot;, &quot;$106,450&quot; ], [ &quot;Caesar Vance&quot;, &quot;Pre-Sales Support&quot;, &quot;New York&quot;, &quot;8330&quot;, &quot;2011/12/12&quot;, &quot;$106,450&quot; ],
[ &quot;Doris Wilder&quot;, &quot;Sales Assistant&quot;, &quot;Sydney&quot;, &quot;3023&quot;, &quot;2010/09/20&quot;, &quot;$85,600&quot; ], [ &quot;Doris Wilder&quot;, &quot;Sales Assistant&quot;, &quot;Sidney&quot;, &quot;3023&quot;, &quot;2010/09/20&quot;, &quot;$85,600&quot; ],
[ &quot;Angelica Ramos&quot;, &quot;Chief Executive Officer (CEO)&quot;, &quot;London&quot;, &quot;5797&quot;, &quot;2009/10/09&quot;, &quot;$1,200,000&quot; ], [ &quot;Angelica Ramos&quot;, &quot;Chief Executive Officer (CEO)&quot;, &quot;London&quot;, &quot;5797&quot;, &quot;2009/10/09&quot;, &quot;$1,200,000&quot; ],
[ &quot;Gavin Joyce&quot;, &quot;Developer&quot;, &quot;Edinburgh&quot;, &quot;8822&quot;, &quot;2010/12/22&quot;, &quot;$92,575&quot; ], [ &quot;Gavin Joyce&quot;, &quot;Developer&quot;, &quot;Edinburgh&quot;, &quot;8822&quot;, &quot;2010/12/22&quot;, &quot;$92,575&quot; ],
[ &quot;Jennifer Chang&quot;, &quot;Regional Director&quot;, &quot;Singapore&quot;, &quot;9239&quot;, &quot;2010/11/14&quot;, &quot;$357,650&quot; ], [ &quot;Jennifer Chang&quot;, &quot;Regional Director&quot;, &quot;Singapore&quot;, &quot;9239&quot;, &quot;2010/11/14&quot;, &quot;$357,650&quot; ],
[ &quot;Brenden Wagner&quot;, &quot;Software Engineer&quot;, &quot;San Francisco&quot;, &quot;1314&quot;, &quot;2011/06/07&quot;, &quot;$206,850&quot; ], [ &quot;Brenden Wagner&quot;, &quot;Software Engineer&quot;, &quot;San Francisco&quot;, &quot;1314&quot;, &quot;2011/06/07&quot;, &quot;$206,850&quot; ],
[ &quot;Fiona Green&quot;, &quot;Chief Operating Officer (COO)&quot;, &quot;San Francisco&quot;, &quot;2947&quot;, &quot;2010/03/11&quot;, &quot;$850,000&quot; ], [ &quot;Fiona Green&quot;, &quot;Chief Operating Officer (COO)&quot;, &quot;San Francisco&quot;, &quot;2947&quot;, &quot;2010/03/11&quot;, &quot;$850,000&quot; ],
[ &quot;Shou Itou&quot;, &quot;Regional Marketing&quot;, &quot;Tokyo&quot;, &quot;8899&quot;, &quot;2011/08/14&quot;, &quot;$163,000&quot; ], [ &quot;Shou Itou&quot;, &quot;Regional Marketing&quot;, &quot;Tokyo&quot;, &quot;8899&quot;, &quot;2011/08/14&quot;, &quot;$163,000&quot; ],
[ &quot;Michelle House&quot;, &quot;Integration Specialist&quot;, &quot;Sydney&quot;, &quot;2769&quot;, &quot;2011/06/02&quot;, &quot;$95,400&quot; ], [ &quot;Michelle House&quot;, &quot;Integration Specialist&quot;, &quot;Sidney&quot;, &quot;2769&quot;, &quot;2011/06/02&quot;, &quot;$95,400&quot; ],
[ &quot;Suki Burks&quot;, &quot;Developer&quot;, &quot;London&quot;, &quot;6832&quot;, &quot;2009/10/22&quot;, &quot;$114,500&quot; ], [ &quot;Suki Burks&quot;, &quot;Developer&quot;, &quot;London&quot;, &quot;6832&quot;, &quot;2009/10/22&quot;, &quot;$114,500&quot; ],
[ &quot;Prescott Bartlett&quot;, &quot;Technical Author&quot;, &quot;London&quot;, &quot;3606&quot;, &quot;2011/05/07&quot;, &quot;$145,000&quot; ], [ &quot;Prescott Bartlett&quot;, &quot;Technical Author&quot;, &quot;London&quot;, &quot;3606&quot;, &quot;2011/05/07&quot;, &quot;$145,000&quot; ],
[ &quot;Gavin Cortez&quot;, &quot;Team Leader&quot;, &quot;San Francisco&quot;, &quot;2860&quot;, &quot;2008/10/26&quot;, &quot;$235,500&quot; ], [ &quot;Gavin Cortez&quot;, &quot;Team Leader&quot;, &quot;San Francisco&quot;, &quot;2860&quot;, &quot;2008/10/26&quot;, &quot;$235,500&quot; ],
@ -154,7 +154,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -349,7 +349,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

10
examples/data_sources/server_side.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Server-side processing</title> <title>DataTables example - Server-side processing</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -43,7 +43,7 @@ $(document).ready(function() {
using server-side processing, please refer to the <a href="../server_side">server-side processing</a> examples.</p> using server-side processing, please refer to the <a href="../server_side">server-side processing</a> examples.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -84,7 +84,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -279,7 +279,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

6
examples/index.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <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/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="./resources/demo.css"> <link rel="stylesheet" type="text/css" href="./resources/demo.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="./resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="./resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="./resources/demo.js"></script> <script type="text/javascript" language="javascript" src="./resources/demo.js"></script>
<title>DataTables examples - Examples index</title> <title>DataTables examples - Examples index</title>
@ -182,7 +182,7 @@
<a href="./styling/material.html">Material Design (Tech. preview)</a> <a href="./styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="./styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="./styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

36
examples/plug-ins/api.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - API plug-in methods</title> <title>DataTables example - API plug-in methods</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -53,7 +53,7 @@ $(document).ready(function() {
<div class="info"> <div class="info">
<p>The DataTables API is designed to be fully extensible, with custom functions being very easy to add using the <code>$.fn.dataTable.Api.register</code> function. <p>The DataTables API is designed to be fully extensible, with custom functions being very easy to add using the <code>$.fn.dataTable.Api.register</code> function.
This function takes two arguments; the first being the name of the method to be added and its chaining hierarchy, and the second the function itself.</p> This function takes two arguments; the first being the name of the method to be added and its chaining hierarchy, and the second the function itself.</p>
<p>This example shows how a <code>sum()</code> method can easily be added to the API so you can get the sum of a column in a single line: <p>This example shows how a <code>sum()</code> method can easily be added to the Api so you can get the sum of a column in a single line:
<code>table.column().data().sum()</code>. Due to the chaining of the methods, this allows <code>sum()</code> to very easily give the sum for any selected column, <code>table.column().data().sum()</code>. Due to the chaining of the methods, this allows <code>sum()</code> to very easily give the sum for any selected column,
and to limit the sum to just the current page, filtered data or all pages. This is done using the options for the <a href= and to limit the sum to just the current page, filtered data or all pages. This is done using the options for the <a href=
"//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()</code></a> method and the options for its selectors.</p> "//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()</code></a> method and the options for its selectors.</p>
@ -62,7 +62,7 @@ $(document).ready(function() {
<div class="demo-html"> <div class="demo-html">
<div id="demo"></div> <div id="demo"></div>
</div> </div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -73,6 +73,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -261,7 +271,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -317,7 +327,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -531,16 +541,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -578,7 +578,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -773,7 +773,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

34
examples/plug-ins/dom_sort.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Live DOM ordering</title> <title>DataTables example - Live DOM ordering</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -70,19 +70,19 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>Live DOM ordering</span></h1> <h1>DataTables example <span>Live DOM ordering</span></h1>
<div class="info"> <div class="info">
<p>This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during its <p>This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's
initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not
reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is
much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.</p> much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.</p>
<p>The example below shows the first column as normal text with ordering as you would expect. The following columns all have a form input element of different <p>The example below shows the first two columns as normal text with ordering as you would expect. The following columns all have a form input element of different
kinds, and the information contained within is what DataTables will perform the order on, based on the value at the time of the order.</p> kinds, and the information contained within is what DataTables will perform the order on, based on the value at the time of the order.</p>
<p>This is a fairly simple example, but you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit <p>This is a fairly simple example, but it you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit
yourself. You could also update the ordering live as a user enters data into a form by using an event handler calling <a href= yourself. You could also update the ordering live as a user in entered data into a form using an event handler calling <a href=
"//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()</code></a> or <a href= "//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> "//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> methods.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -91,6 +91,14 @@ $(document).ready(function() {
<th>Office</th> <th>Office</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -1347,14 +1355,6 @@ $(document).ready(function() {
</select></td> </select></td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Age</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -1411,7 +1411,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -1606,7 +1606,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

4
examples/plug-ins/index.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <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/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css"> <link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Plug-ins</title> <title>DataTables examples - Plug-ins</title>

38
examples/plug-ins/range_filtering.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Custom filtering - range search</title> <title>DataTables example - Custom filtering - range search</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -53,8 +53,8 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>Custom filtering - range search</span></h1> <h1>DataTables example <span>Custom filtering - range search</span></h1>
<div class="info"> <div class="info">
<p>There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range searches (in between two <p>There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range search (in between two
numbers) and date range searches. DataTables provides an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is an array of numbers) and date range search. DataTables provide an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is an array of
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> 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> <p>This example shows a search being performed on the age column in the data, based upon two inputs.</p>
</div> </div>
@ -70,7 +70,7 @@ $(document).ready(function() {
</tr> </tr>
</table> </table>
</div> </div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -81,6 +81,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -269,7 +279,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>$85,600</td> <td>$85,600</td>
@ -325,7 +335,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>$95,400</td> <td>$95,400</td>
@ -539,16 +549,6 @@ $(document).ready(function() {
<td>$112,000</td> <td>$112,000</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -588,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -783,7 +783,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

41
examples/plug-ins/sorting_auto.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ordering plug-ins (with type detection)</title> <title>DataTables example - Ordering plug-ins (with type detection)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -48,15 +48,16 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>Ordering plug-ins (with type detection)</span></h1> <h1>DataTables example <span>Ordering plug-ins (with type detection)</span></h1>
<div class="info"> <div class="info">
<p>Although DataTables will automatically order data from a number of different data types using the built in methods, when dealing with more complex formatted <p>Although DataTables will automatically order data from a number of different data types using the built in methods, When dealing with more complex formatted
data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you can have DataTables sort data in any manner you wish.</p> data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any manner you wish.</p>
<p>Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in assigned to it by making use of DataTables' plug-in type <p>Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in assigned to it by making use of DataTables' plug-in type
detection abilities. For more information about ordering plug-ins, creating them and their requirements, please refer to the plug-in development documentation.</p> detection abilities. For complete information about type detection and ordering plug-ins; creating them and their requirements, please refer to the plug-in
development documentation.</p>
<p>This example shows ordering with using an enumerated type.</p> <p>This example shows ordering with using an enumerated type.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p> <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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -67,6 +68,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -255,7 +266,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>Low</td> <td>Low</td>
@ -311,7 +322,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>Low</td> <td>Low</td>
@ -525,16 +536,6 @@ $(document).ready(function() {
<td>Low</td> <td>Low</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -569,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -764,7 +765,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

42
examples/plug-ins/sorting_manual.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Ordering plug-ins (no type detection)</title> <title>DataTables example - Ordering plug-ins (no type detection)</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -44,18 +44,18 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>Ordering plug-ins (no type detection)</span></h1> <h1>DataTables example <span>Ordering plug-ins (no type detection)</span></h1>
<div class="info"> <div class="info">
<p>Although DataTables will order a number of data types using the built in methods, when dealing with more complex formatted data, it can be desirable to define <p>Although DataTables will order a number of data types using the built in methods, When dealing with more complex formatted data, it can be desirable to define
the ordering order yourself. Using plug-in ordering functions, you can have DataTables order data in any manner you wish.</p> the ordering order yourself. Using plug-in ordering functions, you have have DataTables order data in any manner you wish.</p>
<p>This is done by using the <a href="//datatables.net/reference/option/columns.type"><code class="option" title= <p>This is done by using the <a href="//datatables.net/reference/option/columns.type"><code class="option" title=
"DataTables initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can be of any level of "DataTables initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can be be of any level of
complexity (natural ordering for example can be fairly complex while also very powerful), and is defined by attaching to the complexity (natural ordering for example can be fairly complex while also very powerful), and is defined by attaching to the
<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins, creating them and their requirements, please refer to the plug-in <code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins; creating them and their requirements, please refer to the plug-in
development documentation.</p> development documentation.</p>
<p>This example shows ordering with using an enumerated type.</p> <p>This example shows ordering with using an enumerated type.</p>
<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p> <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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>Name</th> <th>Name</th>
@ -66,6 +66,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody> <tbody>
<tr> <tr>
<td>Tiger Nixon</td> <td>Tiger Nixon</td>
@ -254,7 +264,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Doris Wilder</td> <td>Doris Wilder</td>
<td>Sales Assistant</td> <td>Sales Assistant</td>
<td>Sydney</td> <td>Sidney</td>
<td>23</td> <td>23</td>
<td>2010/09/20</td> <td>2010/09/20</td>
<td>Low</td> <td>Low</td>
@ -310,7 +320,7 @@ $(document).ready(function() {
<tr> <tr>
<td>Michelle House</td> <td>Michelle House</td>
<td>Integration Specialist</td> <td>Integration Specialist</td>
<td>Sydney</td> <td>Sidney</td>
<td>37</td> <td>37</td>
<td>2011/06/02</td> <td>2011/06/02</td>
<td>Low</td> <td>Low</td>
@ -524,16 +534,6 @@ $(document).ready(function() {
<td>Low</td> <td>Low</td>
</tr> </tr>
</tbody> </tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -564,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> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -759,7 +759,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

12
examples/resources/demo.js
View File

@ -28,7 +28,6 @@ if ( window.$ ) {
// init html // init html
var table = $('<p/>').append( $('table').clone() ).html(); var table = $('<p/>').append( $('table').clone() ).html();
var demoHtml = $.trim( $('div.demo-html').html() ); var demoHtml = $.trim( $('div.demo-html').html() );
if ( demoHtml ) { if ( demoHtml ) {
@ -64,15 +63,6 @@ if ( window.$ ) {
str = JSON.stringify( str, null, 2 ); str = JSON.stringify( str, null, 2 );
} catch ( e ) {} } catch ( e ) {}
var strArr = str.split('\n');
if(strArr.length > 1000){
var first = strArr.splice(0, 500);
var second = strArr.splice(strArr.length - 499, 499);
first.push("\n\n... Truncated for brevity - look at your browser's network inspector to see the full source ...\n\n");
str = first.concat(second).join('\n');
}
$('div.tabs div.ajax').append( $('div.tabs div.ajax').append(
$('<code class="multiline language-js"/>').text( str ) $('<code class="multiline language-js"/>').text( str )
); );
@ -104,7 +94,7 @@ if ( window.$ ) {
} }
if ( settings.oFeatures.bServerSide ) { if ( settings.oFeatures.bServerSide ) {
if ( typeof settings.ajax === 'function' ) { if ( $.isFunction( settings.ajax ) ) {
return; return;
} }
$.ajax( { $.ajax( {

17
examples/resources/syntax/shCore.css
View File

@ -87,15 +87,13 @@
} }
.syntaxhighlighter table td.code { .syntaxhighlighter table td.code {
width: 100% !important; width: 100% !important;
position: relative !important;
} }
.syntaxhighlighter table td.code .container { .syntaxhighlighter table td.code .container {
position: relative !important; position: relative !important;
overflow: auto !important;
} }
.syntaxhighlighter table td.code .container textarea { .syntaxhighlighter table td.code .container textarea {
box-sizing: border-box !important; box-sizing: border-box !important;
position: relative !important; position: absolute !important;
left: 0 !important; left: 0 !important;
top: 0 !important; top: 0 !important;
width: 100% !important; width: 100% !important;
@ -105,18 +103,6 @@
padding-left: 1em !important; padding-left: 1em !important;
overflow: hidden !important; overflow: hidden !important;
white-space: pre !important; white-space: pre !important;
line-height: 1.4em !important;
}
.syntaxhighlighter.source table td.code .container {
position: absolute !important;
overflow-x: auto !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
}
.syntaxhighlighter.source table td.code .container div.line {
display: none !important;
} }
.syntaxhighlighter table td.gutter .line { .syntaxhighlighter table td.gutter .line {
text-align: right !important; text-align: right !important;
@ -404,5 +390,6 @@
.syntaxhighlighter table td.code { .syntaxhighlighter table td.code {
width: auto !important; width: auto !important;
overflow: auto !important;
} }

10
examples/server_side/custom_vars.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Custom HTTP variables</title> <title>DataTables example - Custom HTTP variables</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -51,7 +51,7 @@ $(document).ready(function() {
function.</p> function.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -99,7 +99,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -294,7 +294,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

32
examples/server_side/defer_loading.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Deferred loading of data</title> <title>DataTables example - Deferred loading of data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -42,10 +42,10 @@ $(document).ready(function() {
to be displayed correctly).</p> to be displayed correctly).</p>
<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use <a href= <p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use <a href=
"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading</code></a> to tell DataTables that this "//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 user interaction (ordering, paging etc) before making an Ajax call.</p> data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -56,6 +56,16 @@ $(document).ready(function() {
<th>Salary</th> <th>Salary</th>
</tr> </tr>
</thead> </thead>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tr class="odd"> <tr class="odd">
<td>Airi</td> <td>Airi</td>
<td>Satou</td> <td>Satou</td>
@ -136,16 +146,6 @@ $(document).ready(function() {
<td>29th Mar 12</td> <td>29th Mar 12</td>
<td>$433,060</td> <td>$433,060</td>
</tr> </tr>
<tfoot>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table> </table>
<ul class="tabs"> <ul class="tabs">
<li class="active">Javascript</li> <li class="active">Javascript</li>
@ -167,7 +167,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -362,7 +362,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

10
examples/server_side/ids.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Automatic addition of row ID attributes</title> <title>DataTables example - Automatic addition of row ID attributes</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -49,7 +49,7 @@ $(document).ready(function() {
<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> <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>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -98,7 +98,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -293,7 +293,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

12
examples/server_side/index.html
View File

@ -3,10 +3,10 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <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/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css"> <link rel="stylesheet" type="text/css" href="../resources/demo.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<title>DataTables examples - Server-side processing</title> <title>DataTables examples - Server-side processing</title>
@ -17,13 +17,13 @@
<h1>DataTables example <span>Server-side processing</span></h1> <h1>DataTables example <span>Server-side processing</span></h1>
<div class="info"> <div class="info">
<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side <p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side
options that DataTables provides. With server-side processing enabled, all actions that DataTables performs (such as paging, searching and ordering) are handed off options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a
to a server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such,
such, each draw of the table will result in a new Ajax request to get the required data.</p> each draw of the table will result in a new Ajax request being made to get the required data.</p>
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title= <p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
"DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href= "DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p> "//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
<p>The examples in this section show server-side processing in use and how it can be customised to suit your needs.</p> <p>The examples in this section shows server-side processing in use and how it can be customised to suit your needs.</p>
</div> </div>
</section> </section>
</div> </div>

12
examples/server_side/jsonp.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - JSONP data source for remote domains</title> <title>DataTables example - JSONP data source for remote domains</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -35,7 +35,7 @@ $(document).ready(function() {
<section> <section>
<h1>DataTables example <span>JSONP data source for remote domains</span></h1> <h1>DataTables example <span>JSONP data source for remote domains</span></h1>
<div class="info"> <div class="info">
<p><a href="https://stackoverflow.com/questions/2067472/what-is-jsonp-all-about">JSONP</a> is one of several methods to allow the use of JSON data from any server <p><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> is one of several methods to allow the use of JSON data from any server
(browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load (browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load
server-side sourced data from any domain and is quite simply done with the <code>dataType</code> option of the <a href= server-side sourced data from any domain and is quite simply done with the <code>dataType</code> option of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initialisation option.</p> "//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initialisation option.</p>
@ -47,7 +47,7 @@ $(document).ready(function() {
used with the <code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</p> used with the <code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -91,7 +91,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -286,7 +286,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

10
examples/server_side/object_data.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Object data source</title> <title>DataTables example - Object data source</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -48,7 +48,7 @@ $(document).ready(function() {
column.</p> column.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -97,7 +97,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -292,7 +292,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

18
examples/server_side/pipeline.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Pipelining data to reduce Ajax calls for paging</title> <title>DataTables example - Pipelining data to reduce Ajax calls for paging</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -81,7 +81,7 @@ $.fn.dataTable.pipeline = function ( opts ) {
request.length = requestLength*conf.pages; request.length = requestLength*conf.pages;
// Provide the same `data` options as DataTables. // Provide the same `data` options as DataTables.
if ( typeof conf.data === 'function' ) { if ( $.isFunction ( conf.data ) ) {
// As a function it is executed with the data object as an arg // As a function it is executed with the data object as an arg
// for manipulation. If an object is returned, it is used as the // for manipulation. If an object is returned, it is used as the
// data object to submit // data object to submit
@ -95,7 +95,7 @@ $.fn.dataTable.pipeline = function ( opts ) {
$.extend( request, conf.data ); $.extend( request, conf.data );
} }
return $.ajax( { settings.jqXHR = $.ajax( {
"type": conf.method, "type": conf.method,
"url": conf.url, "url": conf.url,
"data": request, "data": request,
@ -168,7 +168,7 @@ $(document).ready(function() {
when using server-side processing, is only available at the server.</p> when using server-side processing, is only available at the server.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -262,7 +262,7 @@ $.fn.dataTable.pipeline = function ( opts ) {
request.length = requestLength*conf.pages; request.length = requestLength*conf.pages;
// Provide the same `data` options as DataTables. // Provide the same `data` options as DataTables.
if ( typeof conf.data === 'function' ) { if ( $.isFunction ( conf.data ) ) {
// As a function it is executed with the data object as an arg // As a function it is executed with the data object as an arg
// for manipulation. If an object is returned, it is used as the // for manipulation. If an object is returned, it is used as the
// data object to submit // data object to submit
@ -276,7 +276,7 @@ $.fn.dataTable.pipeline = function ( opts ) {
$.extend( request, conf.data ); $.extend( request, conf.data );
} }
return $.ajax( { settings.jqXHR = $.ajax( {
&quot;type&quot;: conf.method, &quot;type&quot;: conf.method,
&quot;url&quot;: conf.url, &quot;url&quot;: conf.url,
&quot;data&quot;: request, &quot;data&quot;: request,
@ -332,7 +332,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -527,7 +527,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

10
examples/server_side/post.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - POST data</title> <title>DataTables example - POST data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -11,7 +11,7 @@
<style type="text/css" class="init"> <style type="text/css" class="init">
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -55,7 +55,7 @@ $(document).ready(function() {
used with the <code>type</code> option set to <code class="string" title="String">POST</code> to make a POST request.</p> used with the <code>type</code> option set to <code class="string" title="String">POST</code> to make a POST request.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th>First name</th> <th>First name</th>
@ -107,7 +107,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -302,7 +302,7 @@ $(document).ready(function() {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

10
examples/server_side/row_details.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico"> <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row details</title> <title>DataTables example - Row details</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css"> <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css"> <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
@ -19,7 +19,7 @@ tr.details td.details-control {
} }
</style> </style>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script> <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script> <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script> <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script> <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
@ -110,7 +110,7 @@ $(document).ready(function() {
in server-side processing mode rows are automatically destroyed and recreated on each draw.</p> in server-side processing mode rows are automatically destroyed and recreated on each draw.</p>
</div> </div>
<div class="demo-html"></div> <div class="demo-html"></div>
<table id="example" class="display" style="width:100%"> <table id="example" class="display" cellspacing="0" width="100%">
<thead> <thead>
<tr> <tr>
<th></th> <th></th>
@ -201,7 +201,7 @@ $(document).ready(function() {
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p> <p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul> <ul>
<li> <li>
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a> <a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li> </li>
<li> <li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a> <a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
@ -402,7 +402,7 @@ tr.details td.details-control {
<a href="../styling/material.html">Material Design (Tech. preview)</a> <a href="../styling/material.html">Material Design (Tech. preview)</a>
</li> </li>
<li> <li>
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a> <a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li> </li>
</ul> </ul>
</div> </div>

73
examples/server_side/scripts/firebird.sql
View File

@ -1,73 +0,0 @@
--
-- DataTables Ajax and server-side processing database (Firebird 3)
--
CREATE TABLE "datatables_demo" (
"id" integer generated by default as identity primary key,
"first_name" varchar(250) default '' not null,
"last_name" varchar(250) default '' not null,
"position" varchar(250) default '' not null,
"email" varchar(250) default '' not null,
"office" varchar(250) default '' not null,
"start_date" timestamp default NULL,
"age" int,
"salary" int,
"seq" int,
"extn" varchar(8) default '' not null
);
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Tiger', 'Nixon', 61, 'System Architect', 320800, '25.Apr.2011', 5421, 't.nixon@datatables.net', 'Edinburgh', 2 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Garrett', 'Winters', 63, 'Accountant', 170750, '25.Jul.2011', 8422, 'g.winters@datatables.net', 'Tokyo', 22 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '12.Jan.2009', 1562, 'a.cox@datatables.net', 'San Francisco', 6 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '29.Mar.2012', 6224, 'c.kelly@datatables.net', 'Edinburgh', 41 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Airi', 'Satou', 33, 'Accountant', 162700, '28.Nov.2008', 5407, 'a.satou@datatables.net', 'Tokyo', 55 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '02.Dec.2012', 4804, 'b.williamson@datatables.net', 'New York', 21 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '06.Aug.2012', 9608, 'h.chandler@datatables.net', 'San Francisco', 46 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '14.Oct.2010', 6200, 'r.davidson@datatables.net', 'Tokyo', 50 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '15.Sep.2009', 2360, 'c.hurst@datatables.net', 'San Francisco', 26 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '13.Dec.2008', 1667, 's.frost@datatables.net', 'Edinburgh', 18 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Jena', 'Gaines', 30, 'Office Manager', 90560, '19.Dec.2008', 3814, 'j.gaines@datatables.net', 'London', 13 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '03.Mar.2013', 9497, 'q.flynn@datatables.net', 'Edinburgh', 23 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Charde', 'Marshall', 36, 'Regional Director', 470600, '16.Oct.2008', 6741, 'c.marshall@datatables.net', 'San Francisco', 14 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '18.Dec.2012', 3597, 'h.kennedy@datatables.net', 'London', 12 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '17.Mar.2010', 1965, 't.fitzpatrick@datatables.net', 'London', 54 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '27.Nov.2012', 1581, 'm.silva@datatables.net', 'London', 37 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '09.Jun.2010', 3059, 'p.byrd@datatables.net', 'New York', 32 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '10.Apr.2009', 1721, 'g.little@datatables.net', 'New York', 35 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '13.Oct.2012', 2558, 'b.greer@datatables.net', 'London', 48 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '26.Sep.2012', 2290, 'd.rios@datatables.net', 'Edinburgh', 45 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '03.Sep.2011', 1937, 'j.caldwell@datatables.net', 'New York', 17 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '25.Jun.2009', 6154, 'y.berry@datatables.net', 'New York', 57 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '12.Dec.2011', 8330, 'c.vance@datatables.net', 'New York', 29 );
INSERT INTO "datatables_demo" ( "first_name", "last_name", "age", "position", "salary", "start_date", "extn", "email", "office", "seq" ) VALUES ( 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '20.Sep.2010', 3023, 'd.wilder@datatables.net', 'Sydney', 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', 'Sydney', 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 );

2
examples/server_side/scripts/ids-arrays.php
View File

@ -3,7 +3,7 @@
/* /*
* DataTables example server-side processing script. * DataTables example server-side processing script.
* *
* Please note that this script is intentionally extremely simple to show how * Please note that this script is intentionally extremely simply to show how
* server-side processing can be implemented, and probably shouldn't be used as * server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as * the basis for a large complex system. It is suitable for simple use cases as
* for learning. * for learning.

2
examples/server_side/scripts/ids-objects.php
View File

@ -3,7 +3,7 @@
/* /*
* DataTables example server-side processing script. * DataTables example server-side processing script.
* *
* Please note that this script is intentionally extremely simple to show how * Please note that this script is intentionally extremely simply to show how
* server-side processing can be implemented, and probably shouldn't be used as * server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as * the basis for a large complex system. It is suitable for simple use cases as
* for learning. * for learning.

2
examples/server_side/scripts/jsonp.php
View File

@ -3,7 +3,7 @@
/* /*
* DataTables example server-side processing script. * DataTables example server-side processing script.
* *
* Please note that this script is intentionally extremely simple to show how * Please note that this script is intentionally extremely simply to show how
* server-side processing can be implemented, and probably shouldn't be used as * server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as * the basis for a large complex system. It is suitable for simple use cases as
* for learning. * for learning.

4
examples/server_side/scripts/mysql.sql
View File

@ -46,14 +46,14 @@ INSERT INTO `datatables_demo`
( 21, 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '2011/09/03', 1937, 'j.caldwell@datatables.net', 'New York', 17 ), ( 21, 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '2011/09/03', 1937, 'j.caldwell@datatables.net', 'New York', 17 ),
( 22, 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '2009/06/25', 6154, 'y.berry@datatables.net', 'New York', 57 ), ( 22, 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '2009/06/25', 6154, 'y.berry@datatables.net', 'New York', 57 ),
( 23, 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '2011/12/12', 8330, 'c.vance@datatables.net', 'New York', 29 ), ( 23, 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '2011/12/12', 8330, 'c.vance@datatables.net', 'New York', 29 ),
( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sydney', 56 ), ( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sidney', 56 ),
( 25, 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '2009/10/09', 5797, 'a.ramos@datatables.net', 'London', 36 ), ( 25, 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '2009/10/09', 5797, 'a.ramos@datatables.net', 'London', 36 ),
( 26, 'Gavin', 'Joyce', 42, 'Developer', 92575, '2010/12/22', 8822, 'g.joyce@datatables.net', 'Edinburgh', 5 ), ( 26, 'Gavin', 'Joyce', 42, 'Developer', 92575, '2010/12/22', 8822, 'g.joyce@datatables.net', 'Edinburgh', 5 ),
( 27, 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '2010/11/14', 9239, 'j.chang@datatables.net', 'Singapore', 51 ), ( 27, 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '2010/11/14', 9239, 'j.chang@datatables.net', 'Singapore', 51 ),
( 28, 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '2011/06/07', 1314, 'b.wagner@datatables.net', 'San Francisco', 20 ), ( 28, 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '2011/06/07', 1314, 'b.wagner@datatables.net', 'San Francisco', 20 ),
( 29, 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '2010/03/11', 2947, 'f.green@datatables.net', 'San Francisco', 7 ), ( 29, 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '2010/03/11', 2947, 'f.green@datatables.net', 'San Francisco', 7 ),
( 30, 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '2011/08/14', 8899, 's.itou@datatables.net', 'Tokyo', 1 ), ( 30, 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '2011/08/14', 8899, 's.itou@datatables.net', 'Tokyo', 1 ),
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sydney', 39 ), ( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sidney', 39 ),
( 32, 'Suki', 'Burks', 53, 'Developer', 114500, '2009/10/22', 6832, 's.burks@datatables.net', 'London', 40 ), ( 32, 'Suki', 'Burks', 53, 'Developer', 114500, '2009/10/22', 6832, 's.burks@datatables.net', 'London', 40 ),
( 33, 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '2011/05/07', 3606, 'p.bartlett@datatables.net', 'London', 47 ), ( 33, 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '2011/05/07', 3606, 'p.bartlett@datatables.net', 'London', 47 ),
( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008/10/26', 2860, 'g.cortez@datatables.net', 'San Francisco', 52 ), ( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008/10/26', 2860, 'g.cortez@datatables.net', 'San Francisco', 52 ),

144
examples/server_side/scripts/oracle.sql
View File

@ -5,89 +5,87 @@ BEGIN
EditorDelObject('datatables_demo', 'TABLE'); EditorDelObject('datatables_demo', 'TABLE');
EditorDelObject('datatables_demo_seq', 'SEQUENCE'); EditorDelObject('datatables_demo_seq', 'SEQUENCE');
END; END;
/
CREATE TABLE "datatables_demo" ( CREATE TABLE datatables_demo (
"id" INT PRIMARY KEY NOT NULL, id INT PRIMARY KEY NOT NULL,
"first_name" NVARCHAR2(250), first_name VARCHAR(250),
"last_name" NVARCHAR2(250), last_name VARCHAR(250),
"position" NVARCHAR2(250), position VARCHAR(250),
"email" NVARCHAR2(250), email VARCHAR(250),
"office" NVARCHAR2(250), office VARCHAR(250),
"start_date" DATE, start_date DATE,
"age" INT, age INT,
"salary" INT, salary INT,
"seq" INT, seq INT,
"extn" NVARCHAR2(8) extn VARCHAR(8)
); );
CREATE SEQUENCE datatables_demo_seq; CREATE SEQUENCE datatables_demo_seq;
CREATE OR REPLACE TRIGGER datatables_demo_on_insert CREATE OR REPLACE TRIGGER datatables_demo_on_insert
BEFORE INSERT ON "datatables_demo" BEFORE INSERT ON datatables_demo
FOR EACH ROW FOR EACH ROW
BEGIN BEGIN
SELECT datatables_demo_seq.nextval SELECT datatables_demo_seq.nextval
INTO :new."id" INTO :new.id
FROM dual; FROM dual;
END; 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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '20-Sep-2010', 3023, 'd.wilder@datatables.net', 'Sydney', 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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( 'Michelle', 'House', 37, 'Integration Specialist', 95400, '02-Jun-2011', 2769, 'm.house@datatables.net', 'Sydney', 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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 ( '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 );
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; COMMIT;

2
examples/server_side/scripts/post.php
View File

@ -3,7 +3,7 @@
/* /*
* DataTables example server-side processing script. * DataTables example server-side processing script.
* *
* Please note that this script is intentionally extremely simple to show how * Please note that this script is intentionally extremely simply to show how
* server-side processing can be implemented, and probably shouldn't be used as * server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as * the basis for a large complex system. It is suitable for simple use cases as
* for learning. * for learning.

Some files were not shown because too many files have changed in this diff Show More