mirror of
https://github.com/DataTables/DataTables.git
synced 2024-11-28 10:24:10 +01:00
Dev: Overflow-x only for syntax highlighter - IE11
This commit is contained in:
Allan Jardine
parent
6e51a62684
commit
7779ad6488
@ -1 +1 @@
|
||||
8f9daac0fedf3de08b191c663e2ccbcccdb6ae44
|
||||
0dd502bbc4a317ddc1da948e4a2f4ac8977f7489
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Column rendering</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -52,7 +52,7 @@ $(document).ready(function() {
|
||||
assigning colours based on content rules and any other form of text manipulation you require.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -63,16 +63,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -261,7 +251,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -317,7 +307,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -531,6 +521,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -755,7 +755,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Complex headers with column visibility</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -37,7 +37,7 @@ $(document).ready(function() {
|
||||
<div class="info">
|
||||
<p>Complex headers (using <code>colspan</code> / <code>rowspan</code>) can be used to group columns of similar information in DataTables, creating a very powerful
|
||||
visual effect.</p>
|
||||
<p>In addition to the basic behaviour, DataTables can also take <code>colspan</code> and <code>rowspan</code>s into account when working with hidden columns. The
|
||||
<p>In addition to the basic behaviour, DataTables can also take <code>colspan</code> and <code>rowspan</code> into account when working with hidden columns. The
|
||||
<code>colspan</code> and <code>rowspan</code> attributes for each cell are automatically calculated and rendered on the page for you. This allows the <a href=
|
||||
"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a> option and <a href=
|
||||
"//datatables.net/reference/api/column().visible()"><code class="api" title="DataTables API method">column().visible()</code></a> method to take into account
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Name</th>
|
||||
@ -62,16 +62,6 @@ $(document).ready(function() {
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Salary</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -261,7 +251,7 @@ $(document).ready(function() {
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>$85,600</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
@ -317,7 +307,7 @@ $(document).ready(function() {
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>$95,400</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
@ -530,6 +520,16 @@ $(document).ready(function() {
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Salary</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -746,7 +746,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Setting defaults</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -54,16 +54,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -252,7 +242,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -308,7 +298,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -522,6 +512,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -739,7 +739,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Multiple table control elements</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -19,7 +19,7 @@
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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
|
||||
you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table (<code class="string" title="String">t</code>)
|
||||
should be included only once).</p>
|
||||
<p>This is shown in the demo below where for four key build-in features are duplicated above and below the table.</p>
|
||||
<p>This is shown in the demo below where the four key built-in features are duplicated above and below the table.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -60,16 +60,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -258,7 +248,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -314,7 +304,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -528,6 +518,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -747,7 +747,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Custom toolbar elements</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -17,7 +17,7 @@
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -53,7 +53,7 @@ $(document).ready(function() {
|
||||
Excel / PDF, and more).</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -64,16 +64,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -262,7 +252,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -318,7 +308,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -532,6 +522,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -749,7 +749,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - DataTables events</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -53,7 +53,7 @@ $(document).ready(function() {
|
||||
<div class="demo-html">
|
||||
<div id="demo_info" class="box"></div>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -64,16 +64,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -262,7 +252,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -318,7 +308,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -532,6 +522,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -753,7 +753,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - DOM / jQuery events</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -54,16 +54,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -252,7 +242,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -308,7 +298,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -522,6 +512,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -738,7 +738,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Footer callback</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -13,7 +13,7 @@
|
||||
th { white-space: nowrap; }
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -75,7 +75,7 @@ $(document).ready(function() {
|
||||
footer.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
@ -85,12 +85,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="4" style="text-align:right">Total:</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger</td>
|
||||
@ -257,7 +251,7 @@ $(document).ready(function() {
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -306,7 +300,7 @@ $(document).ready(function() {
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -492,6 +486,12 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th colspan="4" style="text-align:right">Total:</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -736,7 +736,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - HTML5 data-* attributes - cell data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -57,16 +57,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-search="Tiger Nixon">T. Nixon</td>
|
||||
@ -255,7 +245,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td data-search="Doris Wilder">D. Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td data-order="1284940800">Mon 20th Sep 10</td>
|
||||
<td data-order="85600">$85,600/y</td>
|
||||
@ -311,7 +301,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td data-search="Michelle House">M. House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td data-order="1306972800">Thu 2nd Jun 11</td>
|
||||
<td data-order="95400">$95,400/y</td>
|
||||
@ -525,6 +515,16 @@ $(document).ready(function() {
|
||||
<td data-order="112000">$112,000/y</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -736,7 +736,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - HTML5 data-* attributes - table options</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
attributes. The attribute names are read by DataTables and used, potentially in combination with, the standard Javascript initialisation options (with the
|
||||
<code>data-*</code> attributes taking priority).</p>
|
||||
<p>Please note that the attribute values must contain valid JSON data or a Javascript primitive (as require by <a href=
|
||||
"http://api.jquery.com/data/#data-html5">jQuery's <code>$().data()</code> method</a> - this means that double quotes should be used inside the attribute if needed
|
||||
for a string (see the <code>data-order</code> example below).</p>
|
||||
<p>Please note that the attribute values must contain valid JSON data or a Javascript primitive, as required by <a href=
|
||||
"http://api.jquery.com/data/#data-html5">jQuery's <code>$().data()</code> method</a>. This means that double quotes should be used inside the attribute if needed
|
||||
for a string (see the <code>data-order</code> in this example).</p>
|
||||
<p>Additionally, jQuery will convert a dashed string into the camel-case notation used by DataTables for its options. For example <code>data-page-length</code> is
|
||||
used to represent <a href="//datatables.net/reference/option/pageLength"><code class="option" title="DataTables initialisation option">pageLength</code></a>.</p>
|
||||
<p>The table below shows the use of <a href="//datatables.net/reference/option/pageLength"><code class="option" title=
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -735,7 +735,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
<title>DataTables examples - Advanced initialisation</title>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Language file</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -52,16 +52,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -250,7 +240,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -306,7 +296,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -520,6 +510,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -735,7 +735,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Page length options</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -54,16 +54,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -252,7 +242,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -308,7 +298,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -522,6 +512,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -735,7 +735,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Read HTML to data objects</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -60,7 +60,7 @@ $(document).ready(function() {
|
||||
<p>Please note that this feature requires DataTables 1.10.3 or newer.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -71,16 +71,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -269,7 +259,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -325,7 +315,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -539,6 +529,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -759,7 +759,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Row created callback</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -60,16 +60,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -258,7 +248,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -314,7 +304,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -528,6 +518,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -748,7 +748,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Row grouping</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -16,7 +16,7 @@ tr.group:hover {
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -24,18 +24,19 @@ tr.group:hover {
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var groupColumn = 2;
|
||||
var table = $('#example').DataTable({
|
||||
"columnDefs": [
|
||||
{ "visible": false, "targets": 2 }
|
||||
{ "visible": false, "targets": groupColumn }
|
||||
],
|
||||
"order": [[ 2, 'asc' ]],
|
||||
"order": [[ groupColumn, 'asc' ]],
|
||||
"displayLength": 25,
|
||||
"drawCallback": function ( settings ) {
|
||||
var api = this.api();
|
||||
var rows = api.rows( {page:'current'} ).nodes();
|
||||
var last=null;
|
||||
|
||||
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
|
||||
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
|
||||
if ( last !== group ) {
|
||||
$(rows).eq( i ).before(
|
||||
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
|
||||
@ -50,11 +51,11 @@ $(document).ready(function() {
|
||||
// Order by the grouping
|
||||
$('#example tbody').on( 'click', 'tr.group', function () {
|
||||
var currentOrder = table.order()[0];
|
||||
if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
|
||||
table.order( [ 2, 'desc' ] ).draw();
|
||||
if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
|
||||
table.order( [ groupColumn, 'desc' ] ).draw();
|
||||
}
|
||||
else {
|
||||
table.order( [ 2, 'asc' ] ).draw();
|
||||
table.order( [ groupColumn, 'asc' ] ).draw();
|
||||
}
|
||||
} );
|
||||
} );
|
||||
@ -80,7 +81,7 @@ $(document).ready(function() {
|
||||
new sites that make use of row grouping, it is suggested that you use the new RowGroup extension.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -91,16 +92,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -289,7 +280,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -345,7 +336,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -559,6 +550,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -570,18 +571,19 @@ $(document).ready(function() {
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
var groupColumn = 2;
|
||||
var table = $('#example').DataTable({
|
||||
"columnDefs": [
|
||||
{ "visible": false, "targets": 2 }
|
||||
{ "visible": false, "targets": groupColumn }
|
||||
],
|
||||
"order": [[ 2, 'asc' ]],
|
||||
"order": [[ groupColumn, 'asc' ]],
|
||||
"displayLength": 25,
|
||||
"drawCallback": function ( settings ) {
|
||||
var api = this.api();
|
||||
var rows = api.rows( {page:'current'} ).nodes();
|
||||
var last=null;
|
||||
|
||||
api.column(2, {page:'current'} ).data().each( function ( group, i ) {
|
||||
api.column(groupColumn, {page:'current'} ).data().each( function ( group, i ) {
|
||||
if ( last !== group ) {
|
||||
$(rows).eq( i ).before(
|
||||
'<tr class="group"><td colspan="5">'+group+'</td></tr>'
|
||||
@ -596,18 +598,18 @@ $(document).ready(function() {
|
||||
// Order by the grouping
|
||||
$('#example tbody').on( 'click', 'tr.group', function () {
|
||||
var currentOrder = table.order()[0];
|
||||
if ( currentOrder[0] === 2 && currentOrder[1] === 'asc' ) {
|
||||
table.order( [ 2, 'desc' ] ).draw();
|
||||
if ( currentOrder[0] === groupColumn && currentOrder[1] === 'asc' ) {
|
||||
table.order( [ groupColumn, 'desc' ] ).draw();
|
||||
}
|
||||
else {
|
||||
table.order( [ 2, 'asc' ] ).draw();
|
||||
table.order( [ groupColumn, 'asc' ] ).draw();
|
||||
}
|
||||
} );
|
||||
} );</code>
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -805,7 +807,7 @@ tr.group:hover {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Order direction sequence control</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -53,10 +53,10 @@ $(document).ready(function() {
|
||||
<li>Column 6 - default ordering</li>
|
||||
</ul>
|
||||
<p>It's worth noting that I don't have a good use case for when you might what to mix such complex ordering behaviour into a single table, but the example shows
|
||||
how these options can be use and therefore applied across all columns.</p>
|
||||
how these options can be used and therefore applied across all columns.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -67,16 +67,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -265,7 +255,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -321,7 +311,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -535,6 +525,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -755,7 +755,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Flat array data source</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -57,7 +57,7 @@ $(document).ready(function() {
|
||||
object with an array inside it as is the default.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -302,7 +302,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Custom data source property</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -34,7 +34,7 @@ $(document).ready(function() {
|
||||
<h1>DataTables example <span>Custom data source property</span></h1>
|
||||
<div class="info">
|
||||
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
|
||||
<code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href=
|
||||
<code>{ "data": [...] }</code>). This can easily be changed by using the <code>dataSrc</code> option of the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initiation option.</p>
|
||||
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title="DataTables initialisation option">ajax.dataSrc</code></a> has a number
|
||||
of ways in which it can be used:</p>
|
||||
@ -46,11 +46,11 @@ $(document).ready(function() {
|
||||
</ul>
|
||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
|
||||
"DataTables initialisation option">ajax.dataSrc</code></a> being used as a string to get the data from a different source property, in this case <code class=
|
||||
"string" title="String">demo</code> but it could be any value, included a nested property by using standard dotted Javascript object notation.</p>
|
||||
"string" title="String">demo</code>, but it could be any value, including a nested property using standard dotted Javascript object notation.</p>
|
||||
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -287,7 +287,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -187,7 +187,7 @@
|
||||
[
|
||||
"Doris Wilder",
|
||||
"Sales Assistant",
|
||||
"Sidney",
|
||||
"Sydney",
|
||||
"3023",
|
||||
"2010\/09\/20",
|
||||
"$85,600"
|
||||
@ -243,7 +243,7 @@
|
||||
[
|
||||
"Michelle House",
|
||||
"Integration Specialist",
|
||||
"Sidney",
|
||||
"Sydney",
|
||||
"2769",
|
||||
"2011\/06\/02",
|
||||
"$95,400"
|
||||
|
||||
@ -187,7 +187,7 @@
|
||||
[
|
||||
"Doris Wilder",
|
||||
"Sales Assistant",
|
||||
"Sidney",
|
||||
"Sydney",
|
||||
"3023",
|
||||
"2010\/09\/20",
|
||||
"$85,600"
|
||||
@ -243,7 +243,7 @@
|
||||
[
|
||||
"Michelle House",
|
||||
"Integration Specialist",
|
||||
"Sidney",
|
||||
"Sydney",
|
||||
"2769",
|
||||
"2011\/06\/02",
|
||||
"$95,400"
|
||||
|
||||
@ -284,7 +284,7 @@
|
||||
"start_date": "2010\/09\/20"
|
||||
},
|
||||
"contact": {
|
||||
"office": "Sidney",
|
||||
"office": "Sydney",
|
||||
"extn": "3023"
|
||||
}
|
||||
},
|
||||
@ -368,7 +368,7 @@
|
||||
"start_date": "2011\/06\/02"
|
||||
},
|
||||
"contact": {
|
||||
"office": "Sidney",
|
||||
"office": "Sydney",
|
||||
"extn": "2769"
|
||||
}
|
||||
},
|
||||
|
||||
@ -213,7 +213,7 @@
|
||||
"position": "Sales Assistant",
|
||||
"salary": "$85,600",
|
||||
"start_date": "2010\/09\/20",
|
||||
"office": "Sidney",
|
||||
"office": "Sydney",
|
||||
"extn": "3023"
|
||||
},
|
||||
{
|
||||
@ -276,7 +276,7 @@
|
||||
"position": "Integration Specialist",
|
||||
"salary": "$95,400",
|
||||
"start_date": "2011\/06\/02",
|
||||
"office": "Sidney",
|
||||
"office": "Sydney",
|
||||
"extn": "2769"
|
||||
},
|
||||
{
|
||||
|
||||
@ -284,7 +284,7 @@
|
||||
"start_date": "2010\/09\/20"
|
||||
},
|
||||
"contact": [
|
||||
"Sidney",
|
||||
"Sydney",
|
||||
"3023"
|
||||
]
|
||||
},
|
||||
@ -368,7 +368,7 @@
|
||||
"start_date": "2011\/06\/02"
|
||||
},
|
||||
"contact": [
|
||||
"Sidney",
|
||||
"Sydney",
|
||||
"2769"
|
||||
]
|
||||
},
|
||||
|
||||
@ -212,7 +212,7 @@
|
||||
"position": "Sales Assistant",
|
||||
"salary": "$85,600",
|
||||
"start_date": "2010\/09\/20",
|
||||
"office": "Sidney",
|
||||
"office": "Sydney",
|
||||
"extn": "3023"
|
||||
},
|
||||
{
|
||||
@ -275,7 +275,7 @@
|
||||
"position": "Integration Specialist",
|
||||
"salary": "$95,400",
|
||||
"start_date": "2011\/06\/02",
|
||||
"office": "Sidney",
|
||||
"office": "Sydney",
|
||||
"extn": "2769"
|
||||
},
|
||||
{
|
||||
|
||||
@ -309,7 +309,7 @@
|
||||
"$85,600",
|
||||
"2010\/09\/20"
|
||||
],
|
||||
"office": "Sidney",
|
||||
"office": "Sydney",
|
||||
"extn": "3023"
|
||||
},
|
||||
{
|
||||
@ -400,7 +400,7 @@
|
||||
"$95,400",
|
||||
"2011\/06\/02"
|
||||
],
|
||||
"office": "Sidney",
|
||||
"office": "Sydney",
|
||||
"extn": "2769"
|
||||
},
|
||||
{
|
||||
|
||||
@ -261,7 +261,7 @@
|
||||
"display": "Mon 20th Sep 10",
|
||||
"timestamp": "1284940800"
|
||||
},
|
||||
"office": "Sidney",
|
||||
"office": "Sydney",
|
||||
"extn": "3023"
|
||||
},
|
||||
{
|
||||
@ -338,7 +338,7 @@
|
||||
"display": "Thu 2nd Jun 11",
|
||||
"timestamp": "1306972800"
|
||||
},
|
||||
"office": "Sidney",
|
||||
"office": "Sydney",
|
||||
"extn": "2769"
|
||||
},
|
||||
{
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Nested object data (objects)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -63,7 +63,7 @@ $(document).ready(function() {
|
||||
</code></pre>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -306,7 +306,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Deferred rendering for speed</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -42,7 +42,7 @@ $(document).ready(function() {
|
||||
significantly from simply enabling this parameter.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -277,7 +277,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
<title>DataTables examples - Ajax sourced data</title>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Generated content for a column</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||
"DataTables initialisation option">columns.data</code></a> option for the column has been set to <code>null</code> to indicate that the column has no information
|
||||
that should be obtained data source object.</p>
|
||||
contained in the data source object.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -305,7 +305,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Ajax data source (objects)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -300,7 +300,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Nested object data (arrays)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -72,7 +72,7 @@ $(document).ready(function() {
|
||||
</code></pre>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -314,7 +314,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Orthogonal data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -63,7 +63,7 @@ $(document).ready(function() {
|
||||
</code></pre>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -308,7 +308,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Ajax data source (arrays)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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=
|
||||
"DataTables initialisation option">ajax</code></a> documentation or the other Ajax examples for DataTables for further information.</p>
|
||||
<p>By default DataTables will assume that an array data source is to be used and will read the information to be displayed in each column from the row's array
|
||||
using the column index, making working with arrays very simple (note that this can be changed, or objects used may using the <a href=
|
||||
using the column index, making working with arrays very simple (note that this can be changed, or objects may use the <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option, shown in other
|
||||
examples).</p>
|
||||
<p>The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:</p>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -287,7 +287,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Add rows</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -46,22 +46,22 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Add rows</span></h1>
|
||||
<div class="info">
|
||||
<p>New rows can be added to a DataTable very easily using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
|
||||
"DataTables API method">row.add()</code></a> API method. Simply call the API function with the data that is to be used for the new row (be it an array or object).
|
||||
Multiple rows can be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a>
|
||||
method (note the plural). Data can be likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title=
|
||||
<p>New rows can be added to a DataTable using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
|
||||
"DataTables API method">row.add()</code></a> API method. Simply call the API function with the data for the new row (be it an array or object). Multiple rows can
|
||||
be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a> method (note the
|
||||
plural). Data can likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title=
|
||||
"DataTables API method">row().data()</code></a> and <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
|
||||
"DataTables API method">row().remove()</code></a> methods.</p>
|
||||
<p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
|
||||
"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API makes use of.</p>
|
||||
"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API employs.</p>
|
||||
<p>This example shows a single row being added each time the button below is clicked upon.</p>
|
||||
<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls, including creating, editing and deleting rows, to a
|
||||
DataTable.</p>
|
||||
<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls to a DataTable, including creating, editing and deleting
|
||||
rows.</p>
|
||||
</div>
|
||||
<div class="demo-html">
|
||||
<button id="addRow">Add new row</button>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -307,7 +307,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Using API in callbacks</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -50,7 +50,7 @@ $(document).ready(function() {
|
||||
shows the use of the API inside the callbacks!</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -61,16 +61,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -259,7 +249,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -315,7 +305,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -529,6 +519,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -747,7 +747,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Index column</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -43,7 +43,7 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Index column</span></h1>
|
||||
<div class="info">
|
||||
<p>Highly-interactive tables often require a 'counter' column that contains the position in the table for each row. This column should not be sortable, and will
|
||||
<p>Highly-interactive tables often require a 'counter' column that contains the position for each row in the table. This column should not be sortable, and will
|
||||
change dynamically as the ordering and searching applied to the table is altered by the end user.</p>
|
||||
<p>This example shows how this can be achieved with DataTables, where the first column is the counter column, and is updated when ordering or searching occurs.
|
||||
This is done by listening for the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order</code></a> and <a href=
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
@ -65,16 +65,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td></td>
|
||||
@ -264,7 +254,7 @@ $(document).ready(function() {
|
||||
<td></td>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
@ -320,7 +310,7 @@ $(document).ready(function() {
|
||||
<td></td>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>$95,400</td>
|
||||
</tr>
|
||||
@ -533,6 +523,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -757,7 +757,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Form inputs</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -19,7 +19,12 @@
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
var table = $('#example').DataTable();
|
||||
var table = $('#example').DataTable({
|
||||
columnDefs: [{
|
||||
orderable: false,
|
||||
targets: [1,2,3]
|
||||
}]
|
||||
});
|
||||
|
||||
$('button').click( function() {
|
||||
var data = table.$('input, select').serialize();
|
||||
@ -52,7 +57,7 @@ $(document).ready(function() {
|
||||
<div class="demo-html">
|
||||
<button type="submit">Submit form</button>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -61,14 +66,6 @@ $(document).ready(function() {
|
||||
<th>Office</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Age</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -1325,6 +1322,14 @@ $(document).ready(function() {
|
||||
</select></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Age</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -1336,7 +1341,12 @@ $(document).ready(function() {
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
var table = $('#example').DataTable();
|
||||
var table = $('#example').DataTable({
|
||||
columnDefs: [{
|
||||
orderable: false,
|
||||
targets: [1,2,3]
|
||||
}]
|
||||
});
|
||||
|
||||
$('button').click( function() {
|
||||
var data = table.$('input, select').serialize();
|
||||
@ -1350,7 +1360,7 @@ $(document).ready(function() {
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -1545,7 +1555,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Highlighting rows and columns</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -17,7 +17,7 @@ td.highlight {
|
||||
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -44,16 +44,16 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Highlighting rows and columns</span></h1>
|
||||
<div class="info">
|
||||
<p>Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow
|
||||
columns. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
|
||||
<p>This example shows that in action on DataTable by making use of the <a href="//datatables.net/reference/api/cell().index()"><code class="api" title=
|
||||
<p>Highlighting rows and columns can be useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow columns.
|
||||
Highlighting a row is easy using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
|
||||
<p>This example shows DataTables making use of the <a href="//datatables.net/reference/api/cell().index()"><code class="api" title=
|
||||
"DataTables API method">cell().index()</code></a> method to get the index of the column that is to be operated on, and then the <a href=
|
||||
"//datatables.net/reference/api/cells().nodes()"><code class="api" title="DataTables API method">cells().nodes()</code></a> and <a href=
|
||||
"//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()</code></a> methods to remove old classes and
|
||||
apply the new highlighted class, respectively.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
|
||||
<table id="example" class="row-border hover order-column" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -64,16 +64,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -262,7 +252,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -318,7 +308,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -532,6 +522,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -753,7 +753,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
<title>DataTables examples - API</title>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Individual column searching (text inputs)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -17,7 +17,7 @@
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -38,7 +38,7 @@ $(document).ready(function() {
|
||||
table.columns().every( function () {
|
||||
var that = this;
|
||||
|
||||
$( 'input', this.footer() ).on( 'keyup change', function () {
|
||||
$( 'input', this.footer() ).on( 'keyup change clear', function () {
|
||||
if ( that.search() !== this.value ) {
|
||||
that
|
||||
.search( this.value )
|
||||
@ -56,10 +56,10 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Individual column searching (text inputs)</span></h1>
|
||||
<div class="info">
|
||||
<p>The searching functionality that is provided by DataTables is very useful for quickly search through the information in the table - however the search is
|
||||
global, and you may wish to present controls to search on specific columns only.</p>
|
||||
<p>The searching functionality provided by DataTables is useful for quickly search through the information in the table - however the search is global, and you may
|
||||
wish to present controls that search on specific columns.</p>
|
||||
<p>DataTables has the ability to apply searching to a specific column through the <a href="//datatables.net/reference/api/column().search()"><code class="api"
|
||||
title="DataTables API method">column().search()</code></a> method (note that the name of the method is <code>search</code> not <code>filter</code> since <a href=
|
||||
title="DataTables API method">column().search()</code></a> method (note that the name of the method is <code>search</code> not <code>filter</code>, since <a href=
|
||||
"//datatables.net/reference/api/filter()"><code class="api" title="DataTables API method">filter()</code></a> is used to apply a filter to a result set).</p>
|
||||
<p>The column searches are cumulative, so you can apply multiple individual column searches, in addition to the global search, allowing complex searching options
|
||||
to be presented to the user.</p>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -80,16 +80,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -278,7 +268,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -334,7 +324,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -548,6 +538,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -572,7 +572,7 @@ $(document).ready(function() {
|
||||
table.columns().every( function () {
|
||||
var that = this;
|
||||
|
||||
$( 'input', this.footer() ).on( 'keyup change', function () {
|
||||
$( 'input', this.footer() ).on( 'keyup change clear', function () {
|
||||
if ( that.search() !== this.value ) {
|
||||
that
|
||||
.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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -783,7 +783,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Individual column searching (select inputs)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -53,27 +53,30 @@ $(document).ready(function() {
|
||||
<div class="info">
|
||||
<p>This example is almost identical to text based individual column example and provides the same functionality, but in this case using <code class="tag" title=
|
||||
"HTML tag">select</code> input controls.</p>
|
||||
<p>After the table is initialised, the API is used to build the <code class="tag" title="HTML tag">select</code> inputs through the use of the <a href=
|
||||
"//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()</code></a> method to get the data for each column
|
||||
in turn. The helper methods <a href="//datatables.net/reference/api/unique()"><code class="api" title="DataTables API method">unique()</code></a> and <a href=
|
||||
<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=
|
||||
"//datatables.net/reference/api/columns().every()"><code class="api" title="DataTables API method">columns().every()</code></a> to loop over the columns (the
|
||||
<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
|
||||
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
|
||||
and ordered elements. Finally the <code>change</code> event from the <code class="tag" title="HTML tag">select</code> input is used to trigger a column search
|
||||
using the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method.</p>
|
||||
<p>Note that the <a href="//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()</code></a> method in
|
||||
this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built in smart searching. For more information
|
||||
on the search options in DataTables API please refer to the documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
|
||||
this particular case performs an exact match through the use of a custom regular expression and disabling DataTables built-in smart searching. For more information
|
||||
on the search options in DataTables API, please refer to the documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
|
||||
"DataTables API method">search()</code></a>, <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
|
||||
"DataTables API method">column().search()</code></a> and <a href="//datatables.net/reference/api/%24.fn.dataTable.util.escapeRegex()"><code class="api" title=
|
||||
"DataTables API method">$.fn.dataTable.util.escapeRegex()</code></a> which are used for searching globally, by column and escaping regular expressions
|
||||
respectively.</p>
|
||||
<p>Note also that this example shows the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
|
||||
"DataTables initialisation option">initComplete</code></a> a callback function that is triggered when the table has fully loaded. Use of this callback isn't
|
||||
actually required in this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
|
||||
<p>Also note this example demonstrates the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
|
||||
"DataTables initialisation option">initComplete</code></a>, a callback function triggered when the table has fully loaded. Use of this callback isn't required in
|
||||
this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
|
||||
"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete</code></a> is useful to execute code
|
||||
after the data has been loaded.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -84,16 +87,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -282,7 +275,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -338,7 +331,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -552,6 +545,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -589,7 +592,7 @@ $(document).ready(function() {
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -784,7 +787,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Search API (regular expressions)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -121,7 +121,7 @@ $(document).ready(function() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -132,16 +132,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -330,7 +320,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -386,7 +376,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -600,6 +590,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -835,7 +835,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Child rows (show extra / detailed information)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -19,7 +19,7 @@ tr.shown td.details-control {
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -89,17 +89,17 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
|
||||
<div class="info">
|
||||
<p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional
|
||||
information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
|
||||
<p>The DataTables API has a number of methods for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional information
|
||||
about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
|
||||
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a>
|
||||
methods to firstly check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
|
||||
methods to first check if a row is already displayed, and if so hide it (<a href="//datatables.net/reference/api/row().child.hide()"><code class="api" title=
|
||||
"DataTables API method">row().child.hide()</code></a>), otherwise show it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title=
|
||||
"DataTables API method">row().child.show()</code></a>). The content of the child row is, in this example, defined by the <code>formatDetails()</code> function, but
|
||||
you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra
|
||||
information to show.</p>
|
||||
"DataTables API method">row().child.show()</code></a>). The content of the child row in this example is defined by the <code>format()</code> function, but you
|
||||
would replace that with whatever content you wanted to show, possibly including, for example, <a href="https://www.datatables.net/blog/2017-03-31">an Ajax call to
|
||||
the server</a> to obtain any extra information.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -386,7 +386,7 @@ tr.shown td.details-control {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Row selection (multiple rows)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -38,17 +38,17 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Row selection (multiple rows)</span></h1>
|
||||
<div class="info">
|
||||
<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done by simply using a click event to add /
|
||||
remove a class on the table rows. The <a href="//datatables.net/reference/api/rows().data()"><code class="api" title=
|
||||
"DataTables API method">rows().data()</code></a> method can then be used to get the data for the selected rows. In this case it is simply counting the number of
|
||||
selected rows, but much more complex interactions can easily be developed.</p>
|
||||
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
|
||||
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
|
||||
<p>It can be useful to provide the user with the option to select rows in a DataTable. This can be done by using a click event to add / remove a class on the table
|
||||
rows. The <a href="//datatables.net/reference/api/rows().data()"><code class="api" title="DataTables API method">rows().data()</code></a> method can then be used
|
||||
to get the data for the selected rows. In this case it is simply counting the number of selected rows, but much more complex interactions can easily be
|
||||
developed.</p>
|
||||
<p>If you are looking for a more complete and easier to use row selection option, the <a href="https://datatables.net/extras/select">Select extension</a> provides
|
||||
an API that is fully integrated with DataTables for selecting rows and acting upon that secletion.</p>
|
||||
</div>
|
||||
<div class="demo-html">
|
||||
<button id="button">Row count</button>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -59,16 +59,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -257,7 +247,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -313,7 +303,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -527,6 +517,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -746,7 +746,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Row selection and deletion (single row)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -44,20 +44,19 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Row selection and deletion (single row)</span></h1>
|
||||
<div class="info">
|
||||
<p>This example shows a modification of the multiple row selection example, where just a single can now be selected. This is done simply by checking to see if the
|
||||
row already has a selected class or not, and if so removing it, if not then the class is removed from any other row in the table which does have it and applied to
|
||||
the row to be selected.</p>
|
||||
<p>This example modifies the multiple row selection example by only allowing the selection of a single row. This is done by checking to see if the row already has
|
||||
a selected class, and if so removing it, but if not then the class is removed from all other rows in the table and then applied to the row being selected.</p>
|
||||
<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title="DataTables API method">row().remove()</code></a> method which
|
||||
will delete a row from a table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method
|
||||
with <code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be
|
||||
deletes a row from a table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()</code></a> method with
|
||||
<code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be
|
||||
reset to the first page).</p>
|
||||
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
|
||||
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
|
||||
<p>If you are looking for a more complete and easier to use row selection option, the <a href="https://datatables.net/extras/select">Select extension</a> provides
|
||||
an API that is fully integrated with DataTables for selecting rows and acting upon that selection.</p>
|
||||
</div>
|
||||
<div class="demo-html">
|
||||
<button id="button">Delete selected row</button>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -68,16 +67,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -266,7 +255,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -322,7 +311,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -536,6 +525,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -566,7 +565,7 @@ $(document).ready(function() {
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -761,7 +760,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Show / hide columns dynamically</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -45,12 +45,12 @@ $(document).ready(function() {
|
||||
<div class="info">
|
||||
<p>This example shows how you can make use of the <a href="//datatables.net/reference/api/column().visible()"><code class="api" title=
|
||||
"DataTables API method">column().visible()</code></a> API method to dynamically show and hide columns in a table. Also included here is scrolling, just to show it
|
||||
enabled with this API method, although that is not required for the API function to work.</p>
|
||||
<p>In addition to this, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api"
|
||||
title="DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href=
|
||||
enabled with this API method, although it's not required for the API function to work.</p>
|
||||
<p>In addition, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api" title=
|
||||
"DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href=
|
||||
"//datatables.net/reference/api/columns().visible()"><code class="api" title="DataTables API method">columns().visible()</code></a> method to set their state.</p>
|
||||
<p>If you are looking for a more complete column visibility interaction controls, check out the <a href="https://datatables.net/extras/buttons">Buttons extension
|
||||
for DataTables</a> provides a comprehensive module for column visibility control.</p>
|
||||
<p>If you are looking for a more complete column visibility interaction controls, the <a href="https://datatables.net/extras/buttons">Buttons extension for
|
||||
DataTables</a> provides a comprehensive module for column visibility control.</p>
|
||||
</div>
|
||||
<div class="demo-html">
|
||||
<div>
|
||||
@ -59,7 +59,7 @@ $(document).ready(function() {
|
||||
"5">Salary</a>
|
||||
</div>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -70,16 +70,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -268,7 +258,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -324,7 +314,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -538,6 +528,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -762,7 +762,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,17 +3,17 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Scrolling and Bootstrap tabs</title>
|
||||
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/dataTables.bootstrap.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.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="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/dataTables.bootstrap.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js</a>
|
||||
<a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -148,7 +148,8 @@ $(document).ready(function() {
|
||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css</a>
|
||||
<a href=
|
||||
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/css/dataTables.bootstrap.css">../../media/css/dataTables.bootstrap.css</a>
|
||||
@ -328,7 +329,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Alternative pagination</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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">first_last_numbers</code> - 'First' and 'Last' buttons, plus page numbers</li>
|
||||
</ul>
|
||||
<p>The language strings of 'First', 'Previous' etc can be optionally through the internationalisation options of DataTables; <a href=
|
||||
<p>The language strings of 'First', 'Previous' etc can be optionally changed through the internationalisation options of DataTables; <a href=
|
||||
"//datatables.net/reference/option/language.paginate.first"><code class="option" title="DataTables initialisation option">language.paginate.first</code></a>,
|
||||
<a href="//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
|
||||
"DataTables initialisation option">language.paginate.previous</code></a> etc.</p>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -62,16 +62,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -260,7 +250,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -316,7 +306,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -530,6 +520,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -743,7 +743,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Language - Comma decimal place</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -58,16 +58,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -256,7 +246,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85.600,00</td>
|
||||
@ -312,7 +302,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95.400,00</td>
|
||||
@ -526,6 +516,16 @@ $(document).ready(function() {
|
||||
<td>$112.000,00</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -742,7 +742,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Complex headers (rowspan and colspan)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th rowspan="2">Name</th>
|
||||
@ -51,16 +51,6 @@ $(document).ready(function() {
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Salary</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -250,7 +240,7 @@ $(document).ready(function() {
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>$85,600</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>3023</td>
|
||||
<td>d.wilder@datatables.net</td>
|
||||
</tr>
|
||||
@ -306,7 +296,7 @@ $(document).ready(function() {
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>$95,400</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>2769</td>
|
||||
<td>m.house@datatables.net</td>
|
||||
</tr>
|
||||
@ -519,6 +509,16 @@ $(document).ready(function() {
|
||||
<td>d.snider@datatables.net</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Salary</th>
|
||||
<th>Office</th>
|
||||
<th>Extn.</th>
|
||||
<th>E-mail</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -730,7 +730,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - DOM positioning</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -85,7 +85,7 @@ $(document).ready(function() {
|
||||
<code>div</code>.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -96,16 +96,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -294,7 +284,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -350,7 +340,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -564,6 +554,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -777,7 +777,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Feature enable / disable</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -32,12 +32,12 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Feature enable / disable</span></h1>
|
||||
<div class="info">
|
||||
<p>Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. A full list of the
|
||||
options that can be used is <a href="https://datatables.net/reference/option">available in the DataTables reference</a>.</p>
|
||||
<p>Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. The full list of
|
||||
available options is <a href="https://datatables.net/reference/option">available in the DataTables reference</a>.</p>
|
||||
<p>In the following example only the search feature is left enabled (which it is by default).</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -48,16 +48,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -246,7 +236,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -302,7 +292,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -516,6 +506,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -731,7 +731,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Flexible table width</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
attribute to the HTML table tag or inline width style (<code>style="width:100%"</code>), it will be used as the width for the table (overruling any CSS
|
||||
styles).</p>
|
||||
<p>This example shows a table with <code>width="100%"</code> and the container is also flexible width, so as the window is resized, the table will also resize
|
||||
<p>This example shows a table with <code>width="80%"</code> and the container is also flexible width, so as the window is resized, the table will also resize
|
||||
dynamically.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -51,16 +51,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -249,7 +239,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -305,7 +295,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -519,6 +509,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -732,7 +732,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Hidden columns</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -62,16 +62,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -260,7 +250,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -316,7 +306,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -530,6 +520,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -753,7 +753,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
<title>DataTables examples - Basic initialisation</title>
|
||||
@ -16,7 +16,7 @@
|
||||
<section>
|
||||
<h1>DataTables example <span>Basic initialisation</span></h1>
|
||||
<div class="info">
|
||||
<p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The examples in this section demonstrate basic initialisation of
|
||||
<p>DataTables is a simple-to-use jQuery plug-in with a huge range of customisable options. The examples in this section demonstrate basic initialisation of
|
||||
DataTables and how it can be easily customised by passing an object with the options you want.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Language options</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -38,10 +38,10 @@ $(document).ready(function() {
|
||||
<div class="info">
|
||||
<p>Changing the language information displayed by DataTables is as simple as passing in a <a href="//datatables.net/reference/option/language"><code class="option"
|
||||
title="DataTables initialisation option">language</code></a> object to the DataTable constructor.</p>
|
||||
<p>The example above shows a different set of English string being used, rather than the defaults.</p>
|
||||
<p>This example shows a different set of English string being used, rather than the defaults.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -52,16 +52,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -250,7 +240,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -306,7 +296,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -520,6 +510,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -739,7 +739,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Multi-column ordering</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -58,7 +58,7 @@ $(document).ready(function() {
|
||||
directly to the first and the salary column to the first name column.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
@ -234,7 +234,7 @@ $(document).ready(function() {
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>$85,600</td>
|
||||
</tr>
|
||||
<tr>
|
||||
@ -283,7 +283,7 @@ $(document).ready(function() {
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>$95,400</td>
|
||||
</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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -691,7 +691,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Multiple tables</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="" class="display" cellspacing="0" width="100%">
|
||||
<table id="" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -51,15 +51,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -125,17 +116,6 @@ $(document).ready(function() {
|
||||
<td>$183,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table id="" class="display" cellspacing="0" width="100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -145,6 +125,17 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<table id="" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Jena Gaines</td>
|
||||
@ -231,6 +222,15 @@ $(document).ready(function() {
|
||||
<td>$103,500</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -444,7 +444,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Scroll - horizontal</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<table id="example" class="display nowrap" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
@ -315,7 +315,7 @@ $(document).ready(function() {
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -392,7 +392,7 @@ $(document).ready(function() {
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -902,7 +902,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Scroll - horizontal and vertical</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -16,7 +16,7 @@
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -40,7 +40,7 @@ $(document).ready(function() {
|
||||
the scrolling accounts for this.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display nowrap" cellspacing="0" width="100%">
|
||||
<table id="example" class="display nowrap" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
@ -312,7 +312,7 @@ $(document).ready(function() {
|
||||
<td>Doris</td>
|
||||
<td>Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -389,7 +389,7 @@ $(document).ready(function() {
|
||||
<td>Michelle</td>
|
||||
<td>House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -900,7 +900,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Scroll - vertical</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -44,7 +44,7 @@ $(document).ready(function() {
|
||||
"DataTables initialisation option">scrollY</code></a>.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -55,16 +55,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -253,7 +243,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -309,7 +299,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -523,6 +513,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -738,7 +738,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Scroll - vertical, dynamic height</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -40,7 +40,7 @@ $(document).ready(function() {
|
||||
<code>vh</code> unit and all other evergreen browsers.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -51,16 +51,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -249,7 +239,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -305,7 +295,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -519,6 +509,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -734,7 +734,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - State saving</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -45,7 +45,7 @@ $(document).ready(function() {
|
||||
"DataTables initialisation option">stateSave</code></a> option.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -56,16 +56,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -254,7 +244,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -310,7 +300,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -524,6 +514,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -737,7 +737,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Default ordering (sorting)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -40,7 +40,7 @@ $(document).ready(function() {
|
||||
<p>The table below is ordered (descending) by the Age column.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -51,16 +51,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -249,7 +239,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -305,7 +295,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -519,6 +509,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -732,7 +732,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Zero configuration</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -46,16 +46,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -244,7 +234,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -300,7 +290,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -514,6 +504,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -725,7 +725,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Ajax sourced data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -276,7 +276,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - HTML (DOM) sourced data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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
|
||||
is to add searching, ordering and paging to your HTML table by simply running DataTables on it.</p>
|
||||
<p>For further and more complex examples of using DataTables with DOM sourced data, please refer to the <a href="../basic_init">basic initialisation</a> and
|
||||
<a href="../advanced_init">advanced</a> examples.</p>
|
||||
<a href="../advanced_init">advanced initialisation</a> examples.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -47,16 +47,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -245,7 +235,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -301,7 +291,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -515,6 +505,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -726,7 +726,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
<title>DataTables examples - Data sources</title>
|
||||
@ -23,8 +23,8 @@
|
||||
<li>Ajax sourced data with client-side processing</li>
|
||||
<li>Ajax sourced data with server-side processing</li>
|
||||
</ul>
|
||||
<p>Which of these options is used to populate the table with data depends upon how the table is initialised. The examples in this section show these four different
|
||||
data source types.</p>
|
||||
<p>Which of these options is used to populate the table data depends upon how the table is initialised. The examples in this section show these four different data
|
||||
source types.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Javascript sourced data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -42,14 +42,14 @@ var dataSet = [
|
||||
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
|
||||
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
|
||||
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
|
||||
[ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
|
||||
[ "Doris Wilder", "Sales Assistant", "Sydney", "3023", "2010/09/20", "$85,600" ],
|
||||
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
|
||||
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
|
||||
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
|
||||
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
|
||||
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
|
||||
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
|
||||
[ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
|
||||
[ "Michelle House", "Integration Specialist", "Sydney", "2769", "2011/06/02", "$95,400" ],
|
||||
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
|
||||
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
|
||||
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
|
||||
@ -123,14 +123,14 @@ $(document).ready(function() {
|
||||
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
|
||||
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
|
||||
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
|
||||
[ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
|
||||
[ "Doris Wilder", "Sales Assistant", "Sydney", "3023", "2010/09/20", "$85,600" ],
|
||||
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
|
||||
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
|
||||
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
|
||||
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
|
||||
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
|
||||
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
|
||||
[ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
|
||||
[ "Michelle House", "Integration Specialist", "Sydney", "2769", "2011/06/02", "$95,400" ],
|
||||
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
|
||||
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
|
||||
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -349,7 +349,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Server-side processing</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -279,7 +279,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="./resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="./resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="./resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="./resources/demo.js"></script>
|
||||
<title>DataTables examples - Examples index</title>
|
||||
@ -182,7 +182,7 @@
|
||||
<a href="./styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="./styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="./styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - API plug-in methods</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -53,7 +53,7 @@ $(document).ready(function() {
|
||||
<div class="info">
|
||||
<p>The DataTables API is designed to be fully extensible, with custom functions being very easy to add using the <code>$.fn.dataTable.Api.register</code> function.
|
||||
This function takes two arguments; the first being the name of the method to be added and its chaining hierarchy, and the second the function itself.</p>
|
||||
<p>This example shows how a <code>sum()</code> method can easily be added to the Api so you can get the sum of a column in a single line:
|
||||
<p>This example shows how a <code>sum()</code> method can easily be added to the API so you can get the sum of a column in a single line:
|
||||
<code>table.column().data().sum()</code>. Due to the chaining of the methods, this allows <code>sum()</code> to very easily give the sum for any selected column,
|
||||
and to limit the sum to just the current page, filtered data or all pages. This is done using the options for the <a href=
|
||||
"//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()</code></a> method and the options for its selectors.</p>
|
||||
@ -62,7 +62,7 @@ $(document).ready(function() {
|
||||
<div class="demo-html">
|
||||
<div id="demo"></div>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -73,16 +73,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -271,7 +261,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -327,7 +317,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -541,6 +531,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -773,7 +773,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Live DOM ordering</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -70,19 +70,19 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Live DOM ordering</span></h1>
|
||||
<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 it's
|
||||
<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
|
||||
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
|
||||
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 two columns 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 column 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>
|
||||
<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 in entered data into a form using an event handler calling <a href=
|
||||
<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
|
||||
yourself. You could also update the ordering live as a user enters data into a form by 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/draw()"><code class="api" title="DataTables API method">draw()</code></a> methods.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -91,14 +91,6 @@ $(document).ready(function() {
|
||||
<th>Office</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Age</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -1355,6 +1347,14 @@ $(document).ready(function() {
|
||||
</select></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Age</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -1606,7 +1606,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
<title>DataTables examples - Plug-ins</title>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Custom filtering - range search</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -53,8 +53,8 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Custom filtering - range search</span></h1>
|
||||
<div class="info">
|
||||
<p>There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range search (in between two
|
||||
numbers) and date range search. DataTables provide an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is an array of
|
||||
<p>There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range searches (in between two
|
||||
numbers) and date range searches. DataTables provides an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is an array of
|
||||
functions (push your own onto it) which will will be run at table draw time to see if a particular row should be included or not.</p>
|
||||
<p>This example shows a search being performed on the age column in the data, based upon two inputs.</p>
|
||||
</div>
|
||||
@ -70,7 +70,7 @@ $(document).ready(function() {
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -81,16 +81,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -279,7 +269,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>$85,600</td>
|
||||
@ -335,7 +325,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>$95,400</td>
|
||||
@ -549,6 +539,16 @@ $(document).ready(function() {
|
||||
<td>$112,000</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -783,7 +783,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Ordering plug-ins (with type detection)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -48,16 +48,15 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Ordering plug-ins (with type detection)</span></h1>
|
||||
<div class="info">
|
||||
<p>Although DataTables will automatically order data from a number of different data types using the built in methods, When dealing with more complex formatted
|
||||
data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any manner you wish.</p>
|
||||
<p>Although DataTables will automatically order data from a number of different data types using the built in methods, when dealing with more complex formatted
|
||||
data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you can have DataTables sort data in any manner you wish.</p>
|
||||
<p>Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in assigned to it by making use of DataTables' plug-in type
|
||||
detection abilities. For complete information about type detection and ordering plug-ins; creating them and their requirements, please refer to the plug-in
|
||||
development documentation.</p>
|
||||
detection abilities. For more information about ordering plug-ins, creating them and their requirements, please refer to the plug-in development documentation.</p>
|
||||
<p>This example shows ordering with using an enumerated type.</p>
|
||||
<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -68,16 +67,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -266,7 +255,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>Low</td>
|
||||
@ -322,7 +311,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>Low</td>
|
||||
@ -536,6 +525,16 @@ $(document).ready(function() {
|
||||
<td>Low</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -570,7 +569,7 @@ $(document).ready(function() {
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -765,7 +764,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Ordering plug-ins (no type detection)</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -44,18 +44,18 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>Ordering plug-ins (no type detection)</span></h1>
|
||||
<div class="info">
|
||||
<p>Although DataTables will order a number of data types using the built in methods, When dealing with more complex formatted data, it can be desirable to define
|
||||
the ordering order yourself. Using plug-in ordering functions, you have have DataTables order data in any manner you wish.</p>
|
||||
<p>Although DataTables will order a number of data types using the built in methods, when dealing with more complex formatted data, it can be desirable to define
|
||||
the ordering order yourself. Using plug-in ordering functions, you can have DataTables order data in any manner you wish.</p>
|
||||
<p>This is done by using the <a href="//datatables.net/reference/option/columns.type"><code class="option" title=
|
||||
"DataTables initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can be be of any level of
|
||||
"DataTables initialisation option">columns.type</code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can be of any level of
|
||||
complexity (natural ordering for example can be fairly complex while also very powerful), and is defined by attaching to the
|
||||
<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins; creating them and their requirements, please refer to the plug-in
|
||||
<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins, creating them and their requirements, please refer to the plug-in
|
||||
development documentation.</p>
|
||||
<p>This example shows ordering with using an enumerated type.</p>
|
||||
<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
@ -66,16 +66,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Tiger Nixon</td>
|
||||
@ -264,7 +254,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Doris Wilder</td>
|
||||
<td>Sales Assistant</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>23</td>
|
||||
<td>2010/09/20</td>
|
||||
<td>Low</td>
|
||||
@ -320,7 +310,7 @@ $(document).ready(function() {
|
||||
<tr>
|
||||
<td>Michelle House</td>
|
||||
<td>Integration Specialist</td>
|
||||
<td>Sidney</td>
|
||||
<td>Sydney</td>
|
||||
<td>37</td>
|
||||
<td>2011/06/02</td>
|
||||
<td>Low</td>
|
||||
@ -534,6 +524,16 @@ $(document).ready(function() {
|
||||
<td>Low</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Age</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -759,7 +759,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -94,7 +94,7 @@ if ( window.$ ) {
|
||||
}
|
||||
|
||||
if ( settings.oFeatures.bServerSide ) {
|
||||
if ( $.isFunction( settings.ajax ) ) {
|
||||
if ( typeof settings.ajax === 'function' ) {
|
||||
return;
|
||||
}
|
||||
$.ajax( {
|
||||
|
||||
@ -87,13 +87,15 @@
|
||||
}
|
||||
.syntaxhighlighter table td.code {
|
||||
width: 100% !important;
|
||||
position: relative !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code .container {
|
||||
position: relative !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
.syntaxhighlighter table td.code .container textarea {
|
||||
box-sizing: border-box !important;
|
||||
position: absolute !important;
|
||||
position: relative !important;
|
||||
left: 0 !important;
|
||||
top: 0 !important;
|
||||
width: 100% !important;
|
||||
@ -103,6 +105,18 @@
|
||||
padding-left: 1em !important;
|
||||
overflow: hidden !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 {
|
||||
text-align: right !important;
|
||||
@ -390,6 +404,5 @@
|
||||
|
||||
.syntaxhighlighter table td.code {
|
||||
width: auto !important;
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Custom HTTP variables</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -51,7 +51,7 @@ $(document).ready(function() {
|
||||
function.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -294,7 +294,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Deferred loading of data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -42,10 +42,10 @@ $(document).ready(function() {
|
||||
to be displayed correctly).</p>
|
||||
<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use <a href=
|
||||
"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading</code></a> to tell DataTables that this
|
||||
data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
|
||||
data is available and that it should wait for user interaction (ordering, paging etc) before making an Ajax call.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
@ -56,16 +56,6 @@ $(document).ready(function() {
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tr class="odd">
|
||||
<td>Airi</td>
|
||||
<td>Satou</td>
|
||||
@ -146,6 +136,16 @@ $(document).ready(function() {
|
||||
<td>29th Mar 12</td>
|
||||
<td>$433,060</td>
|
||||
</tr>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
<th>Last name</th>
|
||||
<th>Position</th>
|
||||
<th>Office</th>
|
||||
<th>Start date</th>
|
||||
<th>Salary</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -362,7 +362,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Automatic addition of row ID attributes</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -293,7 +293,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
<title>DataTables examples - Server-side processing</title>
|
||||
@ -17,13 +17,13 @@
|
||||
<h1>DataTables example <span>Server-side processing</span></h1>
|
||||
<div class="info">
|
||||
<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side
|
||||
options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a
|
||||
server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such,
|
||||
each draw of the table will result in a new Ajax request being made to get the required data.</p>
|
||||
options that DataTables provides. With server-side processing enabled, all actions that DataTables performs (such as paging, searching and ordering) are handed off
|
||||
to a server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As
|
||||
such, each draw of the table will result in a new Ajax request to get the required data.</p>
|
||||
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
|
||||
"DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
|
||||
<p>The examples in this section shows server-side processing in use and how it can be customised to suit your needs.</p>
|
||||
<p>The examples in this section show server-side processing in use and how it can be customised to suit your needs.</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - JSONP data source for remote domains</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -35,7 +35,7 @@ $(document).ready(function() {
|
||||
<section>
|
||||
<h1>DataTables example <span>JSONP data source for remote domains</span></h1>
|
||||
<div class="info">
|
||||
<p><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> is one of several methods to allow the use of JSON data from any server
|
||||
<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
|
||||
(browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load
|
||||
server-side sourced data from any domain and is quite simply done with the <code>dataType</code> option of the <a href=
|
||||
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initialisation option.</p>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -286,7 +286,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Object data source</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -48,7 +48,7 @@ $(document).ready(function() {
|
||||
column.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -292,7 +292,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Pipelining data to reduce Ajax calls for paging</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -81,7 +81,7 @@ $.fn.dataTable.pipeline = function ( opts ) {
|
||||
request.length = requestLength*conf.pages;
|
||||
|
||||
// Provide the same `data` options as DataTables.
|
||||
if ( $.isFunction ( conf.data ) ) {
|
||||
if ( typeof conf.data === 'function' ) {
|
||||
// As a function it is executed with the data object as an arg
|
||||
// for manipulation. If an object is returned, it is used as the
|
||||
// data object to submit
|
||||
@ -168,7 +168,7 @@ $(document).ready(function() {
|
||||
when using server-side processing, is only available at the server.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First name</th>
|
||||
@ -262,7 +262,7 @@ $.fn.dataTable.pipeline = function ( opts ) {
|
||||
request.length = requestLength*conf.pages;
|
||||
|
||||
// Provide the same `data` options as DataTables.
|
||||
if ( $.isFunction ( conf.data ) ) {
|
||||
if ( typeof conf.data === 'function' ) {
|
||||
// As a function it is executed with the data object as an arg
|
||||
// for manipulation. If an object is returned, it is used as the
|
||||
// data object to submit
|
||||
@ -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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -527,7 +527,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - POST data</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -11,7 +11,7 @@
|
||||
<style type="text/css" class="init">
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -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>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -302,7 +302,7 @@ $(document).ready(function() {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
|
||||
<title>DataTables example - Row details</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
@ -19,7 +19,7 @@ tr.details td.details-control {
|
||||
}
|
||||
|
||||
</style>
|
||||
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||
@ -110,7 +110,7 @@ $(document).ready(function() {
|
||||
in server-side processing mode rows are automatically destroyed and recreated on each draw.</p>
|
||||
</div>
|
||||
<div class="demo-html"></div>
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
<table id="example" class="display" style="width:100%">
|
||||
<thead>
|
||||
<tr>
|
||||
<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>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
|
||||
<a href="https://code.jquery.com/jquery-3.3.1.js">https://code.jquery.com/jquery-3.3.1.js</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
|
||||
@ -402,7 +402,7 @@ tr.details td.details-control {
|
||||
<a href="../styling/material.html">Material Design (Tech. preview)</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
|
||||
<a href="../styling/uikit.html">UIKit 3 (Tech. preview)</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
/*
|
||||
* DataTables example server-side processing script.
|
||||
*
|
||||
* Please note that this script is intentionally extremely simply to show how
|
||||
* Please note that this script is intentionally extremely simple to show how
|
||||
* 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
|
||||
* for learning.
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
/*
|
||||
* DataTables example server-side processing script.
|
||||
*
|
||||
* Please note that this script is intentionally extremely simply to show how
|
||||
* Please note that this script is intentionally extremely simple to show how
|
||||
* 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
|
||||
* for learning.
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
/*
|
||||
* DataTables example server-side processing script.
|
||||
*
|
||||
* Please note that this script is intentionally extremely simply to show how
|
||||
* Please note that this script is intentionally extremely simple to show how
|
||||
* 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
|
||||
* for learning.
|
||||
|
||||
@ -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 ),
|
||||
( 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 ),
|
||||
( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sidney', 56 ),
|
||||
( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sydney', 56 ),
|
||||
( 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 ),
|
||||
( 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 ),
|
||||
( 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 ),
|
||||
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sidney', 39 ),
|
||||
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sydney', 39 ),
|
||||
( 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 ),
|
||||
( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008/10/26', 2860, 'g.cortez@datatables.net', 'San Francisco', 52 ),
|
||||
|
||||
@ -5,87 +5,89 @@ BEGIN
|
||||
EditorDelObject('datatables_demo', 'TABLE');
|
||||
EditorDelObject('datatables_demo_seq', 'SEQUENCE');
|
||||
END;
|
||||
/
|
||||
|
||||
CREATE TABLE datatables_demo (
|
||||
id INT PRIMARY KEY NOT NULL,
|
||||
first_name VARCHAR(250),
|
||||
last_name VARCHAR(250),
|
||||
position VARCHAR(250),
|
||||
email VARCHAR(250),
|
||||
office VARCHAR(250),
|
||||
start_date DATE,
|
||||
age INT,
|
||||
salary INT,
|
||||
seq INT,
|
||||
extn VARCHAR(8)
|
||||
CREATE TABLE "datatables_demo" (
|
||||
"id" INT PRIMARY KEY NOT NULL,
|
||||
"first_name" NVARCHAR2(250),
|
||||
"last_name" NVARCHAR2(250),
|
||||
"position" NVARCHAR2(250),
|
||||
"email" NVARCHAR2(250),
|
||||
"office" NVARCHAR2(250),
|
||||
"start_date" DATE,
|
||||
"age" INT,
|
||||
"salary" INT,
|
||||
"seq" INT,
|
||||
"extn" NVARCHAR2(8)
|
||||
);
|
||||
|
||||
CREATE SEQUENCE datatables_demo_seq;
|
||||
|
||||
CREATE OR REPLACE TRIGGER datatables_demo_on_insert
|
||||
BEFORE INSERT ON datatables_demo
|
||||
BEFORE INSERT ON "datatables_demo"
|
||||
FOR EACH ROW
|
||||
BEGIN
|
||||
SELECT datatables_demo_seq.nextval
|
||||
INTO :new.id
|
||||
INTO :new."id"
|
||||
FROM dual;
|
||||
END;
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Tiger', 'Nixon', 61, 'System Architect', 320800, '25-Apr-2011', 5421, 't.nixon@datatables.net', 'Edinburgh', 2 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Garrett', 'Winters', 63, 'Accountant', 170750, '25-Jul-2011', 8422, 'g.winters@datatables.net', 'Tokyo', 22 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '12-Jan-2009', 1562, 'a.cox@datatables.net', 'San Francisco', 6 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '29-Mar-2012', 6224, 'c.kelly@datatables.net', 'Edinburgh', 41 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Airi', 'Satou', 33, 'Accountant', 162700, '28-Nov-2008', 5407, 'a.satou@datatables.net', 'Tokyo', 55 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '02-Dec-2012', 4804, 'b.williamson@datatables.net', 'New York', 21 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '06-Aug-2012', 9608, 'h.chandler@datatables.net', 'San Francisco', 46 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '14-Oct-2010', 6200, 'r.davidson@datatables.net', 'Tokyo', 50 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '15-Sep-2009', 2360, 'c.hurst@datatables.net', 'San Francisco', 26 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '13-Dec-2008', 1667, 's.frost@datatables.net', 'Edinburgh', 18 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Jena', 'Gaines', 30, 'Office Manager', 90560, '19-Dec-2008', 3814, 'j.gaines@datatables.net', 'London', 13 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '03-Mar-2013', 9497, 'q.flynn@datatables.net', 'Edinburgh', 23 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Charde', 'Marshall', 36, 'Regional Director', 470600, '16-Oct-2008', 6741, 'c.marshall@datatables.net', 'San Francisco', 14 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '18-Dec-2012', 3597, 'h.kennedy@datatables.net', 'London', 12 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '17-Mar-2010', 1965, 't.fitzpatrick@datatables.net', 'London', 54 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '27-Nov-2012', 1581, 'm.silva@datatables.net', 'London', 37 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '09-Jun-2010', 3059, 'p.byrd@datatables.net', 'New York', 32 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '10-Apr-2009', 1721, 'g.little@datatables.net', 'New York', 35 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '13-Oct-2012', 2558, 'b.greer@datatables.net', 'London', 48 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '26-Sep-2012', 2290, 'd.rios@datatables.net', 'Edinburgh', 45 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Jenette', 'Caldwell', 30, 'Development Lead', 345000, '03-Sep-2011', 1937, 'j.caldwell@datatables.net', 'New York', 17 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Yuri', 'Berry', 40, 'Chief Marketing Officer (CMO)', 675000, '25-Jun-2009', 6154, 'y.berry@datatables.net', 'New York', 57 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Caesar', 'Vance', 21, 'Pre-Sales Support', 106450, '12-Dec-2011', 8330, 'c.vance@datatables.net', 'New York', 29 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '20-Sep-2010', 3023, 'd.wilder@datatables.net', 'Sidney', 56 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Angelica', 'Ramos', 47, 'Chief Executive Officer (CEO)', 1200000, '09-Oct-2009', 5797, 'a.ramos@datatables.net', 'London', 36 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Gavin', 'Joyce', 42, 'Developer', 92575, '22-Dec-2010', 8822, 'g.joyce@datatables.net', 'Edinburgh', 5 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Jennifer', 'Chang', 28, 'Regional Director', 357650, '14-Nov-2010', 9239, 'j.chang@datatables.net', 'Singapore', 51 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Brenden', 'Wagner', 28, 'Software Engineer', 206850, '07-Jun-2011', 1314, 'b.wagner@datatables.net', 'San Francisco', 20 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Fiona', 'Green', 48, 'Chief Operating Officer (COO)', 850000, '11-Mar-2010', 2947, 'f.green@datatables.net', 'San Francisco', 7 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Shou', 'Itou', 20, 'Regional Marketing', 163000, '14-Aug-2011', 8899, 's.itou@datatables.net', 'Tokyo', 1 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Michelle', 'House', 37, 'Integration Specialist', 95400, '02-Jun-2011', 2769, 'm.house@datatables.net', 'Sidney', 39 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Suki', 'Burks', 53, 'Developer', 114500, '22-Oct-2009', 6832, 's.burks@datatables.net', 'London', 40 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Prescott', 'Bartlett', 27, 'Technical Author', 145000, '07-May-2011', 3606, 'p.bartlett@datatables.net', 'London', 47 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '26-Oct-2008', 2860, 'g.cortez@datatables.net', 'San Francisco', 52 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '09-Mar-2011', 8240, 'm.mccray@datatables.net', 'Edinburgh', 8 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '09-Dec-2009', 5384, 'u.butler@datatables.net', 'San Francisco', 24 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '16-Dec-2008', 7031, 'h.hatfield@datatables.net', 'San Francisco', 38 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Hope', 'Fuentes', 41, 'Secretary', 109850, '12-Feb-2010', 6318, 'h.fuentes@datatables.net', 'San Francisco', 53 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '14-Feb-2009', 9422, 'v.harrell@datatables.net', 'San Francisco', 30 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '11-Dec-2008', 7580, 't.mooney@datatables.net', 'London', 28 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Jackson', 'Bradshaw', 65, 'Director', 645750, '26-Sep-2008', 1042, 'j.bradshaw@datatables.net', 'New York', 34 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '03-Feb-2011', 2120, 'o.liang@datatables.net', 'Singapore', 4 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '03-May-2011', 6222, 'b.nash@datatables.net', 'London', 3 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '19-Aug-2009', 9383, 's.yamamoto@datatables.net', 'Tokyo', 31 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Thor', 'Walton', 61, 'Developer', 98540, '11-Aug-2013', 8327, 't.walton@datatables.net', 'New York', 11 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '07-Jul-2009', 2927, 'f.camacho@datatables.net', 'San Francisco', 10 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '09-Apr-2012', 8352, 's.baldwin@datatables.net', 'Singapore', 44 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '04-Jan-2010', 7439, 'z.frank@datatables.net', 'New York', 42 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '01-Jun-2012', 4389, 'z.serrano@datatables.net', 'San Francisco', 27 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '01-Feb-2013', 3431, 'j.acosta@datatables.net', 'Edinburgh', 49 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '06-Dec-2011', 3990, 'c.stevens@datatables.net', 'New York', 15 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Hermione', 'Butler', 47, 'Regional Director', 356250, '21-Mar-2011', 1016, 'h.butler@datatables.net', 'London', 9 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '27-Feb-2009', 6733, 'l.greer@datatables.net', 'London', 25 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Jonas', 'Alexander', 30, 'Developer', 86500, '14-Jul-2010', 8196, 'j.alexander@datatables.net', 'San Francisco', 33 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Shad', 'Decker', 51, 'Regional Director', 183000, '13-Nov-2008', 6373, 's.decker@datatables.net', 'Edinburgh', 43 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '27-Jun-2011', 5384, 'm.bruce@datatables.net', 'Singapore', 16 );
|
||||
INSERT INTO datatables_demo ( first_name, last_name, age, position, salary, start_date, extn, email, office, seq ) VALUES ( 'Donna', 'Snider', 27, 'Customer Support', 112000, '25-Jan-2011', 4226, 'd.snider@datatables.net', 'New York', 19 );
|
||||
/
|
||||
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 );
|
||||
|
||||
COMMIT;
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
/*
|
||||
* DataTables example server-side processing script.
|
||||
*
|
||||
* Please note that this script is intentionally extremely simply to show how
|
||||
* Please note that this script is intentionally extremely simple to show how
|
||||
* 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
|
||||
* for learning.
|
||||
|
||||
@ -44,14 +44,14 @@ INSERT INTO datatables_demo
|
||||
( 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 ),
|
||||
( 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', 'Sidney', 56 ),
|
||||
( 24, 'Doris', 'Wilder', 23, 'Sales Assistant', 85600, '2010/09/20', 3023, 'd.wilder@datatables.net', 'Sydney', 56 ),
|
||||
( 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 ),
|
||||
( 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 ),
|
||||
( 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 ),
|
||||
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sidney', 39 ),
|
||||
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011/06/02', 2769, 'm.house@datatables.net', 'Sydney', 39 ),
|
||||
( 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 ),
|
||||
( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008/10/26', 2860, 'g.cortez@datatables.net', 'San Francisco', 52 ),
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
/*
|
||||
* DataTables example server-side processing script.
|
||||
*
|
||||
* Please note that this script is intentionally extremely simply to show how
|
||||
* Please note that this script is intentionally extremely simple to show how
|
||||
* 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
|
||||
* for learning.
|
||||
|
||||
@ -10,7 +10,7 @@ CREATE TABLE datatables_demo (
|
||||
position text NOT NULL default '',
|
||||
email text NOT NULL default '',
|
||||
office text NOT NULL default '',
|
||||
start_date timestamp without time zone default NULL,
|
||||
start_date timestamp default NULL,
|
||||
age integer,
|
||||
salary integer,
|
||||
seq integer,
|
||||
@ -19,61 +19,60 @@ CREATE TABLE datatables_demo (
|
||||
|
||||
INSERT INTO datatables_demo
|
||||
( id, first_name, last_name, age, position, salary, start_date, extn, email, office, seq )
|
||||
VALUES
|
||||
( 1, 'Tiger', 'Nixon', 61, 'System Architect', 320800, '2011/04/25', 5421, 't.nixon@datatables.net', 'Edinburgh', 2 ),
|
||||
( 2, 'Garrett', 'Winters', 63, 'Accountant', 170750, '2011/07/25', 8422, 'g.winters@datatables.net', 'Tokyo', 22 ),
|
||||
( 3, 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '2009/01/12', 1562, 'a.cox@datatables.net', 'San Francisco', 6 ),
|
||||
( 4, 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '2012/03/29', 6224, 'c.kelly@datatables.net', 'Edinburgh', 41 ),
|
||||
( 5, 'Airi', 'Satou', 33, 'Accountant', 162700, '2008/11/28', 5407, 'a.satou@datatables.net', 'Tokyo', 55 ),
|
||||
( 6, 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '2012/12/02', 4804, 'b.williamson@datatables.net', 'New York', 21 ),
|
||||
( 7, 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '2012/08/06', 9608, 'h.chandler@datatables.net', 'San Francisco', 46 ),
|
||||
( 8, 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '2010/10/14', 6200, 'r.davidson@datatables.net', 'Tokyo', 50 ),
|
||||
( 9, 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '2009/09/15', 2360, 'c.hurst@datatables.net', 'San Francisco', 26 ),
|
||||
( 10, 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '2008/12/13', 1667, 's.frost@datatables.net', 'Edinburgh', 18 ),
|
||||
( 11, 'Jena', 'Gaines', 30, 'Office Manager', 90560, '2008/12/19', 3814, 'j.gaines@datatables.net', 'London', 13 ),
|
||||
( 12, 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '2013/03/03', 9497, 'q.flynn@datatables.net', 'Edinburgh', 23 ),
|
||||
( 13, 'Charde', 'Marshall', 36, 'Regional Director', 470600, '2008/10/16', 6741, 'c.marshall@datatables.net', 'San Francisco', 14 ),
|
||||
( 14, 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '2012/12/18', 3597, 'h.kennedy@datatables.net', 'London', 12 ),
|
||||
( 15, 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '2010/03/17', 1965, 't.fitzpatrick@datatables.net', 'London', 54 ),
|
||||
( 16, 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '2012/11/27', 1581, 'm.silva@datatables.net', 'London', 37 ),
|
||||
( 17, 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '2010/06/09', 3059, 'p.byrd@datatables.net', 'New York', 32 ),
|
||||
( 18, 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '2009/04/10', 1721, 'g.little@datatables.net', 'New York', 35 ),
|
||||
( 19, 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '2012/10/13', 2558, 'b.greer@datatables.net', 'London', 48 ),
|
||||
( 20, 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '2012/09/26', 2290, 'd.rios@datatables.net', 'Edinburgh', 45 ),
|
||||
( 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 ),
|
||||
( 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', 'Sidney', 56 ),
|
||||
( 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 ),
|
||||
( 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 ),
|
||||
( 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 ),
|
||||
( 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 ),
|
||||
( 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 ),
|
||||
( 35, 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '2011/03/09', 8240, 'm.mccray@datatables.net', 'Edinburgh', 8 ),
|
||||
( 36, 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '2009/12/09', 5384, 'u.butler@datatables.net', 'San Francisco', 24 ),
|
||||
( 37, 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '2008/12/16', 7031, 'h.hatfield@datatables.net', 'San Francisco', 38 ),
|
||||
( 38, 'Hope', 'Fuentes', 41, 'Secretary', 109850, '2010/02/12', 6318, 'h.fuentes@datatables.net', 'San Francisco', 53 ),
|
||||
( 39, 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '2009/02/14', 9422, 'v.harrell@datatables.net', 'San Francisco', 30 ),
|
||||
( 40, 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '2008/12/11', 7580, 't.mooney@datatables.net', 'London', 28 ),
|
||||
( 41, 'Jackson', 'Bradshaw', 65, 'Director', 645750, '2008/09/26', 1042, 'j.bradshaw@datatables.net', 'New York', 34 ),
|
||||
( 42, 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '2011/02/03', 2120, 'o.liang@datatables.net', 'Singapore', 4 ),
|
||||
( 43, 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '2011/05/03', 6222, 'b.nash@datatables.net', 'London', 3 ),
|
||||
( 44, 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '2009/08/19', 9383, 's.yamamoto@datatables.net', 'Tokyo', 31 ),
|
||||
( 45, 'Thor', 'Walton', 61, 'Developer', 98540, '2013/08/11', 8327, 't.walton@datatables.net', 'New York', 11 ),
|
||||
( 46, 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '2009/07/07', 2927, 'f.camacho@datatables.net', 'San Francisco', 10 ),
|
||||
( 47, 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '2012/04/09', 8352, 's.baldwin@datatables.net', 'Singapore', 44 ),
|
||||
( 48, 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '2010/01/04', 7439, 'z.frank@datatables.net', 'New York', 42 ),
|
||||
( 49, 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '2012/06/01', 4389, 'z.serrano@datatables.net', 'San Francisco', 27 ),
|
||||
( 50, 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '2013/02/01', 3431, 'j.acosta@datatables.net', 'Edinburgh', 49 ),
|
||||
( 51, 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '2011/12/06', 3990, 'c.stevens@datatables.net', 'New York', 15 ),
|
||||
( 52, 'Hermione', 'Butler', 47, 'Regional Director', 356250, '2011/03/21', 1016, 'h.butler@datatables.net', 'London', 9 ),
|
||||
( 53, 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '2009/02/27', 6733, 'l.greer@datatables.net', 'London', 25 ),
|
||||
( 54, 'Jonas', 'Alexander', 30, 'Developer', 86500, '2010/07/14', 8196, 'j.alexander@datatables.net', 'San Francisco', 33 ),
|
||||
( 55, 'Shad', 'Decker', 51, 'Regional Director', 183000, '2008/11/13', 6373, 's.decker@datatables.net', 'Edinburgh', 43 ),
|
||||
( 56, 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '2011/06/27', 5384, 'm.bruce@datatables.net', 'Singapore', 16 ),
|
||||
( 57, 'Donna', 'Snider', 27, 'Customer Support', 112000, '2011/01/25', 4226, 'd.snider@datatables.net', 'New York', 19 );
|
||||
VALUES ( 1, 'Tiger', 'Nixon', 61, 'System Architect', 320800, '2011-04-25', 5421, 't.nixon@datatables.net', 'Edinburgh', 2 ),
|
||||
( 2, 'Garrett', 'Winters', 63, 'Accountant', 170750, '2011-07-25', 8422, 'g.winters@datatables.net', 'Tokyo', 22 ),
|
||||
( 3, 'Ashton', 'Cox', 66, 'Junior Technical Author', 86000, '2009-01-12', 1562, 'a.cox@datatables.net', 'San Francisco', 6 ),
|
||||
( 4, 'Cedric', 'Kelly', 22, 'Senior Javascript Developer', 433060, '2012-03-29', 6224, 'c.kelly@datatables.net', 'Edinburgh', 41 ),
|
||||
( 5, 'Airi', 'Satou', 33, 'Accountant', 162700, '2008-11-28', 5407, 'a.satou@datatables.net', 'Tokyo', 55 ),
|
||||
( 6, 'Brielle', 'Williamson', 61, 'Integration Specialist', 372000, '2012-12-02', 4804, 'b.williamson@datatables.net', 'New York', 21 ),
|
||||
( 7, 'Herrod', 'Chandler', 59, 'Sales Assistant', 137500, '2012-08-06', 9608, 'h.chandler@datatables.net', 'San Francisco', 46 ),
|
||||
( 8, 'Rhona', 'Davidson', 55, 'Integration Specialist', 327900, '2010-10-14', 6200, 'r.davidson@datatables.net', 'Tokyo', 50 ),
|
||||
( 9, 'Colleen', 'Hurst', 39, 'Javascript Developer', 205500, '2009-09-15', 2360, 'c.hurst@datatables.net', 'San Francisco', 26 ),
|
||||
( 10, 'Sonya', 'Frost', 23, 'Software Engineer', 103600, '2008-12-13', 1667, 's.frost@datatables.net', 'Edinburgh', 18 ),
|
||||
( 11, 'Jena', 'Gaines', 30, 'Office Manager', 90560, '2008-12-19', 3814, 'j.gaines@datatables.net', 'London', 13 ),
|
||||
( 12, 'Quinn', 'Flynn', 22, 'Support Lead', 342000, '2013-03-03', 9497, 'q.flynn@datatables.net', 'Edinburgh', 23 ),
|
||||
( 13, 'Charde', 'Marshall', 36, 'Regional Director', 470600, '2008-10-16', 6741, 'c.marshall@datatables.net', 'San Francisco', 14 ),
|
||||
( 14, 'Haley', 'Kennedy', 43, 'Senior Marketing Designer', 313500, '2012-12-18', 3597, 'h.kennedy@datatables.net', 'London', 12 ),
|
||||
( 15, 'Tatyana', 'Fitzpatrick', 19, 'Regional Director', 385750, '2010-03-17', 1965, 't.fitzpatrick@datatables.net', 'London', 54 ),
|
||||
( 16, 'Michael', 'Silva', 66, 'Marketing Designer', 198500, '2012-11-27', 1581, 'm.silva@datatables.net', 'London', 37 ),
|
||||
( 17, 'Paul', 'Byrd', 64, 'Chief Financial Officer (CFO)', 725000, '2010-06-09', 3059, 'p.byrd@datatables.net', 'New York', 32 ),
|
||||
( 18, 'Gloria', 'Little', 59, 'Systems Administrator', 237500, '2009-04-10', 1721, 'g.little@datatables.net', 'New York', 35 ),
|
||||
( 19, 'Bradley', 'Greer', 41, 'Software Engineer', 132000, '2012-10-13', 2558, 'b.greer@datatables.net', 'London', 48 ),
|
||||
( 20, 'Dai', 'Rios', 35, 'Personnel Lead', 217500, '2012-09-26', 2290, 'd.rios@datatables.net', 'Edinburgh', 45 ),
|
||||
( 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 ),
|
||||
( 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 ),
|
||||
( 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 ),
|
||||
( 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 ),
|
||||
( 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 ),
|
||||
( 31, 'Michelle', 'House', 37, 'Integration Specialist', 95400, '2011-06-02', 2769, 'm.house@datatables.net', 'Sydney', 39 ),
|
||||
( 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 ),
|
||||
( 34, 'Gavin', 'Cortez', 22, 'Team Leader', 235500, '2008-10-26', 2860, 'g.cortez@datatables.net', 'San Francisco', 52 ),
|
||||
( 35, 'Martena', 'Mccray', 46, 'Post-Sales support', 324050, '2011-03-09', 8240, 'm.mccray@datatables.net', 'Edinburgh', 8 ),
|
||||
( 36, 'Unity', 'Butler', 47, 'Marketing Designer', 85675, '2009-12-09', 5384, 'u.butler@datatables.net', 'San Francisco', 24 ),
|
||||
( 37, 'Howard', 'Hatfield', 51, 'Office Manager', 164500, '2008-12-16', 7031, 'h.hatfield@datatables.net', 'San Francisco', 38 ),
|
||||
( 38, 'Hope', 'Fuentes', 41, 'Secretary', 109850, '2010-02-12', 6318, 'h.fuentes@datatables.net', 'San Francisco', 53 ),
|
||||
( 39, 'Vivian', 'Harrell', 62, 'Financial Controller', 452500, '2009-02-14', 9422, 'v.harrell@datatables.net', 'San Francisco', 30 ),
|
||||
( 40, 'Timothy', 'Mooney', 37, 'Office Manager', 136200, '2008-12-11', 7580, 't.mooney@datatables.net', 'London', 28 ),
|
||||
( 41, 'Jackson', 'Bradshaw', 65, 'Director', 645750, '2008-09-26', 1042, 'j.bradshaw@datatables.net', 'New York', 34 ),
|
||||
( 42, 'Olivia', 'Liang', 64, 'Support Engineer', 234500, '2011-02-03', 2120, 'o.liang@datatables.net', 'Singapore', 4 ),
|
||||
( 43, 'Bruno', 'Nash', 38, 'Software Engineer', 163500, '2011-05-03', 6222, 'b.nash@datatables.net', 'London', 3 ),
|
||||
( 44, 'Sakura', 'Yamamoto', 37, 'Support Engineer', 139575, '2009-08-19', 9383, 's.yamamoto@datatables.net', 'Tokyo', 31 ),
|
||||
( 45, 'Thor', 'Walton', 61, 'Developer', 98540, '2013-08-11', 8327, 't.walton@datatables.net', 'New York', 11 ),
|
||||
( 46, 'Finn', 'Camacho', 47, 'Support Engineer', 87500, '2009-07-07', 2927, 'f.camacho@datatables.net', 'San Francisco', 10 ),
|
||||
( 47, 'Serge', 'Baldwin', 64, 'Data Coordinator', 138575, '2012-04-09', 8352, 's.baldwin@datatables.net', 'Singapore', 44 ),
|
||||
( 48, 'Zenaida', 'Frank', 63, 'Software Engineer', 125250, '2010-01-04', 7439, 'z.frank@datatables.net', 'New York', 42 ),
|
||||
( 49, 'Zorita', 'Serrano', 56, 'Software Engineer', 115000, '2012-06-01', 4389, 'z.serrano@datatables.net', 'San Francisco', 27 ),
|
||||
( 50, 'Jennifer', 'Acosta', 43, 'Junior Javascript Developer', 75650, '2013-02-01', 3431, 'j.acosta@datatables.net', 'Edinburgh', 49 ),
|
||||
( 51, 'Cara', 'Stevens', 46, 'Sales Assistant', 145600, '2011-12-06', 3990, 'c.stevens@datatables.net', 'New York', 15 ),
|
||||
( 52, 'Hermione', 'Butler', 47, 'Regional Director', 356250, '2011-03-21', 1016, 'h.butler@datatables.net', 'London', 9 ),
|
||||
( 53, 'Lael', 'Greer', 21, 'Systems Administrator', 103500, '2009-02-27', 6733, 'l.greer@datatables.net', 'London', 25 ),
|
||||
( 54, 'Jonas', 'Alexander', 30, 'Developer', 86500, '2010-07-14', 8196, 'j.alexander@datatables.net', 'San Francisco', 33 ),
|
||||
( 55, 'Shad', 'Decker', 51, 'Regional Director', 183000, '2008-11-13', 6373, 's.decker@datatables.net', 'Edinburgh', 43 ),
|
||||
( 56, 'Michael', 'Bruce', 29, 'Javascript Developer', 183000, '2011-06-27', 5384, 'm.bruce@datatables.net', 'Singapore', 16 ),
|
||||
( 57, 'Donna', 'Snider', 27, 'Customer Support', 112000, '2011-01-25', 4226, 'd.snider@datatables.net', 'New York', 19 );
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user