zino/pkrstarsbot
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init commit2

Browse Source
This commit is contained in:
zino
2021-02-16 23:13:27 +01:00
parent 12b4ef5db4
commit 1011e8b282
815 changed files with 365513 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

465
website/DataTables/examples/server_side/custom_vars.html Normal file
View File

@@ -0,0 +1,465 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Custom HTTP variables</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "scripts/server_processing.php",
"data": function ( d ) {
d.myKey = "myValue";
// d.custom = $('#myInput').val();
// etc
}
}
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Custom HTTP variables</span></h1>
<div class="info">
<p>It can often be useful to send extra information to the server when utilising DataTables' server-side processing option. This is done by using the <a href=
"//datatables.net/reference/option/ajax.data"><code class="option" title="DataTables initialisation option">ajax.data</code></a> option which can be used in one of
two different ways:</p>
<ul class="markdown">
<li><code>object</code> - An object data to send to the server. This is useful for adding static data to the request.</li>
<li><code>function</code> - A function which will manipulate the data object to send to the server, adding values as required. Using the <code>data</code>
parameter as a function allows the additional data to evaluated and added to the request at the time the request is made.</li>
</ul>
<p>The example below shows server-side processing being used with an extra parameter being sent to the server by using the <code>ajax.data</code> option as a
function.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<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>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: {
&quot;url&quot;: &quot;scripts/server_processing.php&quot;,
&quot;data&quot;: function ( d ) {
d.myKey = &quot;myValue&quot;;
// d.custom = $('#myInput').val();
// etc
}
}
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
</li>
<li>
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
</li>
<li>
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
</li>
<li>
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
</li>
<li>
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
</li>
<li>
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
</li>
<li>
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
</li>
<li>
<a href="../basic_init/dom.html">DOM positioning</a>
</li>
<li>
<a href="../basic_init/flexible_width.html">Flexible table width</a>
</li>
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
<li>
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
</li>
<li>
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
</li>
<li>
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
</li>
<li>
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
</li>
<li>
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
</li>
<li>
<a href="../basic_init/language.html">Language options</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li>
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
</li>
<li>
<a href="../advanced_init/dt_events.html">DataTables events</a>
</li>
<li>
<a href="../advanced_init/column_render.html">Column rendering</a>
</li>
<li>
<a href="../advanced_init/length_menu.html">Page length options</a>
</li>
<li>
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
</li>
<li>
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
</li>
<li>
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
</li>
<li>
<a href="../advanced_init/defaults.html">Setting defaults</a>
</li>
<li>
<a href="../advanced_init/row_callback.html">Row created callback</a>
</li>
<li>
<a href="../advanced_init/row_grouping.html">Row grouping</a>
</li>
<li>
<a href="../advanced_init/footer_callback.html">Footer callback</a>
</li>
<li>
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
</li>
<li>
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/display.html">Base style</a>
</li>
<li>
<a href="../styling/no-classes.html">Base style - no styling classes</a>
</li>
<li>
<a href="../styling/cell-border.html">Base style - cell borders</a>
</li>
<li>
<a href="../styling/compact.html">Base style - compact</a>
</li>
<li>
<a href="../styling/hover.html">Base style - hover</a>
</li>
<li>
<a href="../styling/order-column.html">Base style - order-column</a>
</li>
<li>
<a href="../styling/row-border.html">Base style - row borders</a>
</li>
<li>
<a href="../styling/stripe.html">Base style - stripe</a>
</li>
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li>
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
</li>
<li>
<a href="../data_sources/ajax.html">Ajax sourced data</a>
</li>
<li>
<a href="../data_sources/js_array.html">Javascript sourced data</a>
</li>
<li>
<a href="../data_sources/server_side.html">Server-side processing</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/add_row.html">Add rows</a>
</li>
<li>
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
</li>
<li>
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
</li>
<li>
<a href="../api/highlight.html">Highlighting rows and columns</a>
</li>
<li>
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
</li>
<li>
<a href="../api/select_row.html">Row selection (multiple rows)</a>
</li>
<li>
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
</li>
<li>
<a href="../api/form.html">Form inputs</a>
</li>
<li>
<a href="../api/counter_columns.html">Index column</a>
</li>
<li>
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
</li>
<li>
<a href="../api/api_in_init.html">Using API in callbacks</a>
</li>
<li>
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
</li>
<li>
<a href="../api/regex.html">Search API (regular expressions)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li>
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
</li>
<li>
<a href="../ajax/objects.html">Ajax data source (objects)</a>
</li>
<li>
<a href="../ajax/deep.html">Nested object data (objects)</a>
</li>
<li>
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
</li>
<li>
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
</li>
<li>
<a href="../ajax/null_data_source.html">Generated content for a column</a>
</li>
<li>
<a href="../ajax/custom_data_property.html">Custom data source property</a>
</li>
<li>
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
</li>
<li>
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Server-side</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Server-side processing</a>
</li>
<li class="active">
<a href="./custom_vars.html">Custom HTTP variables</a>
</li>
<li>
<a href="./post.html">POST data</a>
</li>
<li>
<a href="./ids.html">Automatic addition of row ID attributes</a>
</li>
<li>
<a href="./object_data.html">Object data source</a>
</li>
<li>
<a href="./row_details.html">Row details</a>
</li>
<li>
<a href="./select_rows.html">Row selection</a>
</li>
<li>
<a href="./jsonp.html">JSONP data source for remote domains</a>
</li>
<li>
<a href="./defer_loading.html">Deferred loading of data</a>
</li>
<li>
<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li>
<a href="../plug-ins/api.html">API plug-in methods</a>
</li>
<li>
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
</li>
<li>
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
</li>
<li>
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
</li>
<li>
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

533
website/DataTables/examples/server_side/defer_loading.html Normal file
View File

@@ -0,0 +1,533 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Deferred loading of data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/server_processing.php",
"deferLoading": 57
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Deferred loading of data</span></h1>
<div class="info">
<p>When using DataTables with server-side processing, the default behaviour is to have DataTables automatically make an Ajax call and load the data, removing
anything which might have already been in the table. However, this behaviour might not always be desirable when the first page of the table has already been
preloaded in the HTML (which you might do to ensure accessibility or for performance reasons).</p>
<p>This automatic Ajax call to get the first page of data can be overridden by using the <a href="//datatables.net/reference/option/deferLoading"><code class=
"option" title="DataTables initialisation option">deferLoading</code></a> initialisation property. It serves two purposes, firstly to indicate that deferred
loading is required, but also to tell DataTables how many records there are in the full table, in this case 57 (this allows the information element and pagination
to be displayed correctly).</p>
<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use <a href=
"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading</code></a> to tell DataTables that this
data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<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>
<td>Accountant</td>
<td>Tokyo</td>
<td>28th Nov 08</td>
<td>$162,700</td>
</tr>
<tr class="even">
<td>Angelica</td>
<td>Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>9th Oct 09</td>
<td>$1,200,000</td>
</tr>
<tr class="odd">
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>12th Jan 09</td>
<td>$86,000</td>
</tr>
<tr class="even">
<td>Bradley</td>
<td>Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>13th Oct 12</td>
<td>$132,000</td>
</tr>
<tr class="odd">
<td>Brenden</td>
<td>Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>7th Jun 11</td>
<td>$206,850</td>
</tr>
<tr class="even">
<td>Brielle</td>
<td>Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>2nd Dec 12</td>
<td>$372,000</td>
</tr>
<tr class="odd">
<td>Bruno</td>
<td>Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>3rd May 11</td>
<td>$163,500</td>
</tr>
<tr class="even">
<td>Caesar</td>
<td>Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>12th Dec 11</td>
<td>$106,450</td>
</tr>
<tr class="odd">
<td>Cara</td>
<td>Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>6th Dec 11</td>
<td>$145,600</td>
</tr>
<tr class="even">
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>29th Mar 12</td>
<td>$433,060</td>
</tr>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/server_processing.php&quot;,
&quot;deferLoading&quot;: 57
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
</li>
<li>
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
</li>
<li>
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
</li>
<li>
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
</li>
<li>
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
</li>
<li>
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
</li>
<li>
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
</li>
<li>
<a href="../basic_init/dom.html">DOM positioning</a>
</li>
<li>
<a href="../basic_init/flexible_width.html">Flexible table width</a>
</li>
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
<li>
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
</li>
<li>
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
</li>
<li>
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
</li>
<li>
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
</li>
<li>
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
</li>
<li>
<a href="../basic_init/language.html">Language options</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li>
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
</li>
<li>
<a href="../advanced_init/dt_events.html">DataTables events</a>
</li>
<li>
<a href="../advanced_init/column_render.html">Column rendering</a>
</li>
<li>
<a href="../advanced_init/length_menu.html">Page length options</a>
</li>
<li>
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
</li>
<li>
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
</li>
<li>
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
</li>
<li>
<a href="../advanced_init/defaults.html">Setting defaults</a>
</li>
<li>
<a href="../advanced_init/row_callback.html">Row created callback</a>
</li>
<li>
<a href="../advanced_init/row_grouping.html">Row grouping</a>
</li>
<li>
<a href="../advanced_init/footer_callback.html">Footer callback</a>
</li>
<li>
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
</li>
<li>
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/display.html">Base style</a>
</li>
<li>
<a href="../styling/no-classes.html">Base style - no styling classes</a>
</li>
<li>
<a href="../styling/cell-border.html">Base style - cell borders</a>
</li>
<li>
<a href="../styling/compact.html">Base style - compact</a>
</li>
<li>
<a href="../styling/hover.html">Base style - hover</a>
</li>
<li>
<a href="../styling/order-column.html">Base style - order-column</a>
</li>
<li>
<a href="../styling/row-border.html">Base style - row borders</a>
</li>
<li>
<a href="../styling/stripe.html">Base style - stripe</a>
</li>
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li>
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
</li>
<li>
<a href="../data_sources/ajax.html">Ajax sourced data</a>
</li>
<li>
<a href="../data_sources/js_array.html">Javascript sourced data</a>
</li>
<li>
<a href="../data_sources/server_side.html">Server-side processing</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/add_row.html">Add rows</a>
</li>
<li>
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
</li>
<li>
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
</li>
<li>
<a href="../api/highlight.html">Highlighting rows and columns</a>
</li>
<li>
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
</li>
<li>
<a href="../api/select_row.html">Row selection (multiple rows)</a>
</li>
<li>
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
</li>
<li>
<a href="../api/form.html">Form inputs</a>
</li>
<li>
<a href="../api/counter_columns.html">Index column</a>
</li>
<li>
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
</li>
<li>
<a href="../api/api_in_init.html">Using API in callbacks</a>
</li>
<li>
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
</li>
<li>
<a href="../api/regex.html">Search API (regular expressions)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li>
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
</li>
<li>
<a href="../ajax/objects.html">Ajax data source (objects)</a>
</li>
<li>
<a href="../ajax/deep.html">Nested object data (objects)</a>
</li>
<li>
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
</li>
<li>
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
</li>
<li>
<a href="../ajax/null_data_source.html">Generated content for a column</a>
</li>
<li>
<a href="../ajax/custom_data_property.html">Custom data source property</a>
</li>
<li>
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
</li>
<li>
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Server-side</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Server-side processing</a>
</li>
<li>
<a href="./custom_vars.html">Custom HTTP variables</a>
</li>
<li>
<a href="./post.html">POST data</a>
</li>
<li>
<a href="./ids.html">Automatic addition of row ID attributes</a>
</li>
<li>
<a href="./object_data.html">Object data source</a>
</li>
<li>
<a href="./row_details.html">Row details</a>
</li>
<li>
<a href="./select_rows.html">Row selection</a>
</li>
<li>
<a href="./jsonp.html">JSONP data source for remote domains</a>
</li>
<li class="active">
<a href="./defer_loading.html">Deferred loading of data</a>
</li>
<li>
<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li>
<a href="../plug-ins/api.html">API plug-in methods</a>
</li>
<li>
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
</li>
<li>
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
</li>
<li>
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
</li>
<li>
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

464
website/DataTables/examples/server_side/ids.html Normal file
View File

@@ -0,0 +1,464 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Automatic addition of row ID attributes</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/ids-objects.php",
"columns": [
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Automatic addition of row ID attributes</span></h1>
<div class="info">
<p>Often when using server-side processing you will find that it can be useful to have a specific ID on each row (the primary key value from the database for
example). By assigning the ID you want to apply to each row using the property <code>DT_RowId</code> of the data source object for each row (this property name can
be configured using the <a href="//datatables.net/reference/option/rowId"><code class="option" title="DataTables initialisation option">rowId</code></a> option),
DataTables will automatically add it for you (note that this will work for Ajax and Javascript loaded data as well as for server-side processing).</p>
<p>In addition to <code>DT_RowId</code> there are other properties which perform similar actions - please refer to the <a href=
"https://datatables.net/manual/server-side">server-side processing section of the manual</a> for full details.</p>
<p>This example below shows <code>DT_RowId</code> being used to add information to the table. In addition objects are used as the data source for the rows.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<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>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/ids-objects.php&quot;,
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;first_name&quot; },
{ &quot;data&quot;: &quot;last_name&quot; },
{ &quot;data&quot;: &quot;position&quot; },
{ &quot;data&quot;: &quot;office&quot; },
{ &quot;data&quot;: &quot;start_date&quot; },
{ &quot;data&quot;: &quot;salary&quot; }
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
</li>
<li>
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
</li>
<li>
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
</li>
<li>
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
</li>
<li>
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
</li>
<li>
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
</li>
<li>
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
</li>
<li>
<a href="../basic_init/dom.html">DOM positioning</a>
</li>
<li>
<a href="../basic_init/flexible_width.html">Flexible table width</a>
</li>
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
<li>
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
</li>
<li>
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
</li>
<li>
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
</li>
<li>
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
</li>
<li>
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
</li>
<li>
<a href="../basic_init/language.html">Language options</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li>
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
</li>
<li>
<a href="../advanced_init/dt_events.html">DataTables events</a>
</li>
<li>
<a href="../advanced_init/column_render.html">Column rendering</a>
</li>
<li>
<a href="../advanced_init/length_menu.html">Page length options</a>
</li>
<li>
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
</li>
<li>
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
</li>
<li>
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
</li>
<li>
<a href="../advanced_init/defaults.html">Setting defaults</a>
</li>
<li>
<a href="../advanced_init/row_callback.html">Row created callback</a>
</li>
<li>
<a href="../advanced_init/row_grouping.html">Row grouping</a>
</li>
<li>
<a href="../advanced_init/footer_callback.html">Footer callback</a>
</li>
<li>
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
</li>
<li>
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/display.html">Base style</a>
</li>
<li>
<a href="../styling/no-classes.html">Base style - no styling classes</a>
</li>
<li>
<a href="../styling/cell-border.html">Base style - cell borders</a>
</li>
<li>
<a href="../styling/compact.html">Base style - compact</a>
</li>
<li>
<a href="../styling/hover.html">Base style - hover</a>
</li>
<li>
<a href="../styling/order-column.html">Base style - order-column</a>
</li>
<li>
<a href="../styling/row-border.html">Base style - row borders</a>
</li>
<li>
<a href="../styling/stripe.html">Base style - stripe</a>
</li>
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li>
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
</li>
<li>
<a href="../data_sources/ajax.html">Ajax sourced data</a>
</li>
<li>
<a href="../data_sources/js_array.html">Javascript sourced data</a>
</li>
<li>
<a href="../data_sources/server_side.html">Server-side processing</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/add_row.html">Add rows</a>
</li>
<li>
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
</li>
<li>
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
</li>
<li>
<a href="../api/highlight.html">Highlighting rows and columns</a>
</li>
<li>
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
</li>
<li>
<a href="../api/select_row.html">Row selection (multiple rows)</a>
</li>
<li>
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
</li>
<li>
<a href="../api/form.html">Form inputs</a>
</li>
<li>
<a href="../api/counter_columns.html">Index column</a>
</li>
<li>
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
</li>
<li>
<a href="../api/api_in_init.html">Using API in callbacks</a>
</li>
<li>
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
</li>
<li>
<a href="../api/regex.html">Search API (regular expressions)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li>
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
</li>
<li>
<a href="../ajax/objects.html">Ajax data source (objects)</a>
</li>
<li>
<a href="../ajax/deep.html">Nested object data (objects)</a>
</li>
<li>
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
</li>
<li>
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
</li>
<li>
<a href="../ajax/null_data_source.html">Generated content for a column</a>
</li>
<li>
<a href="../ajax/custom_data_property.html">Custom data source property</a>
</li>
<li>
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
</li>
<li>
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Server-side</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Server-side processing</a>
</li>
<li>
<a href="./custom_vars.html">Custom HTTP variables</a>
</li>
<li>
<a href="./post.html">POST data</a>
</li>
<li class="active">
<a href="./ids.html">Automatic addition of row ID attributes</a>
</li>
<li>
<a href="./object_data.html">Object data source</a>
</li>
<li>
<a href="./row_details.html">Row details</a>
</li>
<li>
<a href="./select_rows.html">Row selection</a>
</li>
<li>
<a href="./jsonp.html">JSONP data source for remote domains</a>
</li>
<li>
<a href="./defer_loading.html">Deferred loading of data</a>
</li>
<li>
<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li>
<a href="../plug-ins/api.html">API plug-in methods</a>
</li>
<li>
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
</li>
<li>
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
</li>
<li>
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
</li>
<li>
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

85
website/DataTables/examples/server_side/index.html Normal file
View File

@@ -0,0 +1,85 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<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="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<title>DataTables examples - Server-side processing</title>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Server-side processing</span></h1>
<div class="info">
<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side
options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a
server where an SQL engine (or similar) can perform these actions on the large data set (after all, that's what the database engine is designed for!). As such,
each draw of the table will result in a new Ajax request being made to get the required data.</p>
<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>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<div class="toc">
<div class="toc-group">
<h3><a href="./index.html">Server-side</a></h3>
<ul class="toc">
<li>
<a href="./simple.html">Server-side processing</a>
</li>
<li>
<a href="./custom_vars.html">Custom HTTP variables</a>
</li>
<li>
<a href="./post.html">POST data</a>
</li>
<li>
<a href="./ids.html">Automatic addition of row ID attributes</a>
</li>
<li>
<a href="./object_data.html">Object data source</a>
</li>
<li>
<a href="./row_details.html">Row details</a>
</li>
<li>
<a href="./select_rows.html">Row selection</a>
</li>
<li>
<a href="./jsonp.html">JSONP data source for remote domains</a>
</li>
<li>
<a href="./defer_loading.html">Deferred loading of data</a>
</li>
<li>
<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

457
website/DataTables/examples/server_side/jsonp.html Normal file
View File

@@ -0,0 +1,457 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - JSONP data source for remote domains</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "scripts/jsonp.php",
"dataType": "jsonp"
}
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>JSONP data source for remote domains</span></h1>
<div class="info">
<p><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> is one of several methods to allow the use of JSON data from any server
(browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load
server-side sourced data from any domain and is quite simply done with the <code>dataType</code> option of the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> initialisation option.</p>
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used in jQuery's Ajax function can
also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
option).</p>
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
used with the <code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<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>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: {
&quot;url&quot;: &quot;scripts/jsonp.php&quot;,
&quot;dataType&quot;: &quot;jsonp&quot;
}
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
</li>
<li>
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
</li>
<li>
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
</li>
<li>
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
</li>
<li>
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
</li>
<li>
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
</li>
<li>
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
</li>
<li>
<a href="../basic_init/dom.html">DOM positioning</a>
</li>
<li>
<a href="../basic_init/flexible_width.html">Flexible table width</a>
</li>
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
<li>
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
</li>
<li>
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
</li>
<li>
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
</li>
<li>
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
</li>
<li>
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
</li>
<li>
<a href="../basic_init/language.html">Language options</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li>
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
</li>
<li>
<a href="../advanced_init/dt_events.html">DataTables events</a>
</li>
<li>
<a href="../advanced_init/column_render.html">Column rendering</a>
</li>
<li>
<a href="../advanced_init/length_menu.html">Page length options</a>
</li>
<li>
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
</li>
<li>
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
</li>
<li>
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
</li>
<li>
<a href="../advanced_init/defaults.html">Setting defaults</a>
</li>
<li>
<a href="../advanced_init/row_callback.html">Row created callback</a>
</li>
<li>
<a href="../advanced_init/row_grouping.html">Row grouping</a>
</li>
<li>
<a href="../advanced_init/footer_callback.html">Footer callback</a>
</li>
<li>
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
</li>
<li>
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/display.html">Base style</a>
</li>
<li>
<a href="../styling/no-classes.html">Base style - no styling classes</a>
</li>
<li>
<a href="../styling/cell-border.html">Base style - cell borders</a>
</li>
<li>
<a href="../styling/compact.html">Base style - compact</a>
</li>
<li>
<a href="../styling/hover.html">Base style - hover</a>
</li>
<li>
<a href="../styling/order-column.html">Base style - order-column</a>
</li>
<li>
<a href="../styling/row-border.html">Base style - row borders</a>
</li>
<li>
<a href="../styling/stripe.html">Base style - stripe</a>
</li>
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li>
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
</li>
<li>
<a href="../data_sources/ajax.html">Ajax sourced data</a>
</li>
<li>
<a href="../data_sources/js_array.html">Javascript sourced data</a>
</li>
<li>
<a href="../data_sources/server_side.html">Server-side processing</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/add_row.html">Add rows</a>
</li>
<li>
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
</li>
<li>
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
</li>
<li>
<a href="../api/highlight.html">Highlighting rows and columns</a>
</li>
<li>
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
</li>
<li>
<a href="../api/select_row.html">Row selection (multiple rows)</a>
</li>
<li>
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
</li>
<li>
<a href="../api/form.html">Form inputs</a>
</li>
<li>
<a href="../api/counter_columns.html">Index column</a>
</li>
<li>
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
</li>
<li>
<a href="../api/api_in_init.html">Using API in callbacks</a>
</li>
<li>
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
</li>
<li>
<a href="../api/regex.html">Search API (regular expressions)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li>
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
</li>
<li>
<a href="../ajax/objects.html">Ajax data source (objects)</a>
</li>
<li>
<a href="../ajax/deep.html">Nested object data (objects)</a>
</li>
<li>
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
</li>
<li>
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
</li>
<li>
<a href="../ajax/null_data_source.html">Generated content for a column</a>
</li>
<li>
<a href="../ajax/custom_data_property.html">Custom data source property</a>
</li>
<li>
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
</li>
<li>
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Server-side</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Server-side processing</a>
</li>
<li>
<a href="./custom_vars.html">Custom HTTP variables</a>
</li>
<li>
<a href="./post.html">POST data</a>
</li>
<li>
<a href="./ids.html">Automatic addition of row ID attributes</a>
</li>
<li>
<a href="./object_data.html">Object data source</a>
</li>
<li>
<a href="./row_details.html">Row details</a>
</li>
<li>
<a href="./select_rows.html">Row selection</a>
</li>
<li class="active">
<a href="./jsonp.html">JSONP data source for remote domains</a>
</li>
<li>
<a href="./defer_loading.html">Deferred loading of data</a>
</li>
<li>
<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li>
<a href="../plug-ins/api.html">API plug-in methods</a>
</li>
<li>
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
</li>
<li>
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
</li>
<li>
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
</li>
<li>
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

463
website/DataTables/examples/server_side/object_data.html Normal file
View File

@@ -0,0 +1,463 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Object data source</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/objects.php",
"columns": [
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Object data source</span></h1>
<div class="info">
<p>The default data format that DataTables expects for server-side processing is a 2D array of data (rows by columns). However, this is often not flexible enough
for either the server-side environment, or you might want to convey more information in the data source than is necessary to show in the table (row IDs from the
database for example). For these situations DataTables supports the reading of data for objects as well as arrays.</p>
<p>In this example the server responds with an array of objects, where DataTables will look up and use each property that is specified by the <a href=
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> property given for each
column.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<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>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/objects.php&quot;,
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;first_name&quot; },
{ &quot;data&quot;: &quot;last_name&quot; },
{ &quot;data&quot;: &quot;position&quot; },
{ &quot;data&quot;: &quot;office&quot; },
{ &quot;data&quot;: &quot;start_date&quot; },
{ &quot;data&quot;: &quot;salary&quot; }
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
</li>
<li>
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
</li>
<li>
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
</li>
<li>
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
</li>
<li>
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
</li>
<li>
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
</li>
<li>
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
</li>
<li>
<a href="../basic_init/dom.html">DOM positioning</a>
</li>
<li>
<a href="../basic_init/flexible_width.html">Flexible table width</a>
</li>
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
<li>
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
</li>
<li>
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
</li>
<li>
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
</li>
<li>
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
</li>
<li>
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
</li>
<li>
<a href="../basic_init/language.html">Language options</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li>
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
</li>
<li>
<a href="../advanced_init/dt_events.html">DataTables events</a>
</li>
<li>
<a href="../advanced_init/column_render.html">Column rendering</a>
</li>
<li>
<a href="../advanced_init/length_menu.html">Page length options</a>
</li>
<li>
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
</li>
<li>
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
</li>
<li>
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
</li>
<li>
<a href="../advanced_init/defaults.html">Setting defaults</a>
</li>
<li>
<a href="../advanced_init/row_callback.html">Row created callback</a>
</li>
<li>
<a href="../advanced_init/row_grouping.html">Row grouping</a>
</li>
<li>
<a href="../advanced_init/footer_callback.html">Footer callback</a>
</li>
<li>
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
</li>
<li>
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/display.html">Base style</a>
</li>
<li>
<a href="../styling/no-classes.html">Base style - no styling classes</a>
</li>
<li>
<a href="../styling/cell-border.html">Base style - cell borders</a>
</li>
<li>
<a href="../styling/compact.html">Base style - compact</a>
</li>
<li>
<a href="../styling/hover.html">Base style - hover</a>
</li>
<li>
<a href="../styling/order-column.html">Base style - order-column</a>
</li>
<li>
<a href="../styling/row-border.html">Base style - row borders</a>
</li>
<li>
<a href="../styling/stripe.html">Base style - stripe</a>
</li>
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li>
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
</li>
<li>
<a href="../data_sources/ajax.html">Ajax sourced data</a>
</li>
<li>
<a href="../data_sources/js_array.html">Javascript sourced data</a>
</li>
<li>
<a href="../data_sources/server_side.html">Server-side processing</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/add_row.html">Add rows</a>
</li>
<li>
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
</li>
<li>
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
</li>
<li>
<a href="../api/highlight.html">Highlighting rows and columns</a>
</li>
<li>
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
</li>
<li>
<a href="../api/select_row.html">Row selection (multiple rows)</a>
</li>
<li>
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
</li>
<li>
<a href="../api/form.html">Form inputs</a>
</li>
<li>
<a href="../api/counter_columns.html">Index column</a>
</li>
<li>
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
</li>
<li>
<a href="../api/api_in_init.html">Using API in callbacks</a>
</li>
<li>
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
</li>
<li>
<a href="../api/regex.html">Search API (regular expressions)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li>
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
</li>
<li>
<a href="../ajax/objects.html">Ajax data source (objects)</a>
</li>
<li>
<a href="../ajax/deep.html">Nested object data (objects)</a>
</li>
<li>
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
</li>
<li>
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
</li>
<li>
<a href="../ajax/null_data_source.html">Generated content for a column</a>
</li>
<li>
<a href="../ajax/custom_data_property.html">Custom data source property</a>
</li>
<li>
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
</li>
<li>
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Server-side</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Server-side processing</a>
</li>
<li>
<a href="./custom_vars.html">Custom HTTP variables</a>
</li>
<li>
<a href="./post.html">POST data</a>
</li>
<li>
<a href="./ids.html">Automatic addition of row ID attributes</a>
</li>
<li class="active">
<a href="./object_data.html">Object data source</a>
</li>
<li>
<a href="./row_details.html">Row details</a>
</li>
<li>
<a href="./select_rows.html">Row selection</a>
</li>
<li>
<a href="./jsonp.html">JSONP data source for remote domains</a>
</li>
<li>
<a href="./defer_loading.html">Deferred loading of data</a>
</li>
<li>
<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li>
<a href="../plug-ins/api.html">API plug-in methods</a>
</li>
<li>
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
</li>
<li>
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
</li>
<li>
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
</li>
<li>
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

698
website/DataTables/examples/server_side/pipeline.html Normal file
View File

@@ -0,0 +1,698 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Pipelining data to reduce Ajax calls for paging</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
//
// Pipelining function for DataTables. To be used to the `ajax` option of DataTables
//
$.fn.dataTable.pipeline = function ( opts ) {
// Configuration options
var conf = $.extend( {
pages: 5, // number of pages to cache
url: '', // script url
data: null, // function or object with parameters to send to the server
// matching how `ajax.data` works in DataTables
method: 'GET' // Ajax HTTP method
}, opts );
// Private variables for storing the cache
var cacheLower = -1;
var cacheUpper = null;
var cacheLastRequest = null;
var cacheLastJson = null;
return function ( request, drawCallback, settings ) {
var ajax = false;
var requestStart = request.start;
var drawStart = request.start;
var requestLength = request.length;
var requestEnd = requestStart + requestLength;
if ( settings.clearCache ) {
// API requested that the cache be cleared
ajax = true;
settings.clearCache = false;
}
else if ( cacheLower < 0 || requestStart < cacheLower || requestEnd > cacheUpper ) {
// outside cached data - need to make a request
ajax = true;
}
else if ( JSON.stringify( request.order ) !== JSON.stringify( cacheLastRequest.order ) ||
JSON.stringify( request.columns ) !== JSON.stringify( cacheLastRequest.columns ) ||
JSON.stringify( request.search ) !== JSON.stringify( cacheLastRequest.search )
) {
// properties changed (ordering, columns, searching)
ajax = true;
}
// Store the request for checking next time around
cacheLastRequest = $.extend( true, {}, request );
if ( ajax ) {
// Need data from the server
if ( requestStart < cacheLower ) {
requestStart = requestStart - (requestLength*(conf.pages-1));
if ( requestStart < 0 ) {
requestStart = 0;
}
}
cacheLower = requestStart;
cacheUpper = requestStart + (requestLength * conf.pages);
request.start = requestStart;
request.length = requestLength*conf.pages;
// Provide the same `data` options as DataTables.
if ( $.isFunction ( conf.data ) ) {
// 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
var d = conf.data( request );
if ( d ) {
$.extend( request, d );
}
}
else if ( $.isPlainObject( conf.data ) ) {
// As an object, the data given extends the default
$.extend( request, conf.data );
}
settings.jqXHR = $.ajax( {
"type": conf.method,
"url": conf.url,
"data": request,
"dataType": "json",
"cache": false,
"success": function ( json ) {
cacheLastJson = $.extend(true, {}, json);
if ( cacheLower != drawStart ) {
json.data.splice( 0, drawStart-cacheLower );
}
if ( requestLength >= -1 ) {
json.data.splice( requestLength, json.data.length );
}
drawCallback( json );
}
} );
}
else {
json = $.extend( true, {}, cacheLastJson );
json.draw = request.draw; // Update the echo for each response
json.data.splice( 0, requestStart-cacheLower );
json.data.splice( requestLength, json.data.length );
drawCallback(json);
}
}
};
// Register an API method that will empty the pipelined data, forcing an Ajax
// fetch on the next draw (i.e. `table.clearPipeline().draw()`)
$.fn.dataTable.Api.register( 'clearPipeline()', function () {
return this.iterator( 'table', function ( settings ) {
settings.clearCache = true;
} );
} );
//
// DataTables initialisation
//
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": $.fn.dataTable.pipeline( {
url: 'scripts/server_processing.php',
pages: 5 // number of pages to cache
} )
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Pipelining data to reduce Ajax calls for paging</span></h1>
<div class="info">
<p>Server-side processing can be quite hard on your server, since it makes an Ajax call to the server for every draw request that is made. On sites with a large
number of page views, you could potentially end up DDoSing your own server with your own applications!</p>
<p>This example shows one technique to reduce the number of Ajax calls that are made to the server by caching more data than is needed for each draw. This is done
by intercepting the Ajax call and routing it through a data cache control; using the data from the cache if available, and making the Ajax request if not. This
intercept of the Ajax request is performed by giving the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax</code></a> option as a function. This function then performs the logic of deciding if another Ajax call is needed, or if
data from the cache can be used.</p>
<p>Keep in mind that this caching is for paging only; the pipeline must be cleared for other interactions such as ordering and searching since the full data set,
when using server-side processing, is only available at the server.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<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>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">//
// Pipelining function for DataTables. To be used to the `ajax` option of DataTables
//
$.fn.dataTable.pipeline = function ( opts ) {
// Configuration options
var conf = $.extend( {
pages: 5, // number of pages to cache
url: '', // script url
data: null, // function or object with parameters to send to the server
// matching how `ajax.data` works in DataTables
method: 'GET' // Ajax HTTP method
}, opts );
// Private variables for storing the cache
var cacheLower = -1;
var cacheUpper = null;
var cacheLastRequest = null;
var cacheLastJson = null;
return function ( request, drawCallback, settings ) {
var ajax = false;
var requestStart = request.start;
var drawStart = request.start;
var requestLength = request.length;
var requestEnd = requestStart + requestLength;
if ( settings.clearCache ) {
// API requested that the cache be cleared
ajax = true;
settings.clearCache = false;
}
else if ( cacheLower &lt; 0 || requestStart &lt; cacheLower || requestEnd &gt; cacheUpper ) {
// outside cached data - need to make a request
ajax = true;
}
else if ( JSON.stringify( request.order ) !== JSON.stringify( cacheLastRequest.order ) ||
JSON.stringify( request.columns ) !== JSON.stringify( cacheLastRequest.columns ) ||
JSON.stringify( request.search ) !== JSON.stringify( cacheLastRequest.search )
) {
// properties changed (ordering, columns, searching)
ajax = true;
}
// Store the request for checking next time around
cacheLastRequest = $.extend( true, {}, request );
if ( ajax ) {
// Need data from the server
if ( requestStart &lt; cacheLower ) {
requestStart = requestStart - (requestLength*(conf.pages-1));
if ( requestStart &lt; 0 ) {
requestStart = 0;
}
}
cacheLower = requestStart;
cacheUpper = requestStart + (requestLength * conf.pages);
request.start = requestStart;
request.length = requestLength*conf.pages;
// Provide the same `data` options as DataTables.
if ( $.isFunction ( conf.data ) ) {
// 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
var d = conf.data( request );
if ( d ) {
$.extend( request, d );
}
}
else if ( $.isPlainObject( conf.data ) ) {
// As an object, the data given extends the default
$.extend( request, conf.data );
}
settings.jqXHR = $.ajax( {
&quot;type&quot;: conf.method,
&quot;url&quot;: conf.url,
&quot;data&quot;: request,
&quot;dataType&quot;: &quot;json&quot;,
&quot;cache&quot;: false,
&quot;success&quot;: function ( json ) {
cacheLastJson = $.extend(true, {}, json);
if ( cacheLower != drawStart ) {
json.data.splice( 0, drawStart-cacheLower );
}
if ( requestLength &gt;= -1 ) {
json.data.splice( requestLength, json.data.length );
}
drawCallback( json );
}
} );
}
else {
json = $.extend( true, {}, cacheLastJson );
json.draw = request.draw; // Update the echo for each response
json.data.splice( 0, requestStart-cacheLower );
json.data.splice( requestLength, json.data.length );
drawCallback(json);
}
}
};
// Register an API method that will empty the pipelined data, forcing an Ajax
// fetch on the next draw (i.e. `table.clearPipeline().draw()`)
$.fn.dataTable.Api.register( 'clearPipeline()', function () {
return this.iterator( 'table', function ( settings ) {
settings.clearCache = true;
} );
} );
//
// DataTables initialisation
//
$(document).ready(function() {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: $.fn.dataTable.pipeline( {
url: 'scripts/server_processing.php',
pages: 5 // number of pages to cache
} )
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
</li>
<li>
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
</li>
<li>
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
</li>
<li>
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
</li>
<li>
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
</li>
<li>
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
</li>
<li>
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
</li>
<li>
<a href="../basic_init/dom.html">DOM positioning</a>
</li>
<li>
<a href="../basic_init/flexible_width.html">Flexible table width</a>
</li>
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
<li>
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
</li>
<li>
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
</li>
<li>
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
</li>
<li>
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
</li>
<li>
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
</li>
<li>
<a href="../basic_init/language.html">Language options</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li>
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
</li>
<li>
<a href="../advanced_init/dt_events.html">DataTables events</a>
</li>
<li>
<a href="../advanced_init/column_render.html">Column rendering</a>
</li>
<li>
<a href="../advanced_init/length_menu.html">Page length options</a>
</li>
<li>
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
</li>
<li>
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
</li>
<li>
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
</li>
<li>
<a href="../advanced_init/defaults.html">Setting defaults</a>
</li>
<li>
<a href="../advanced_init/row_callback.html">Row created callback</a>
</li>
<li>
<a href="../advanced_init/row_grouping.html">Row grouping</a>
</li>
<li>
<a href="../advanced_init/footer_callback.html">Footer callback</a>
</li>
<li>
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
</li>
<li>
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/display.html">Base style</a>
</li>
<li>
<a href="../styling/no-classes.html">Base style - no styling classes</a>
</li>
<li>
<a href="../styling/cell-border.html">Base style - cell borders</a>
</li>
<li>
<a href="../styling/compact.html">Base style - compact</a>
</li>
<li>
<a href="../styling/hover.html">Base style - hover</a>
</li>
<li>
<a href="../styling/order-column.html">Base style - order-column</a>
</li>
<li>
<a href="../styling/row-border.html">Base style - row borders</a>
</li>
<li>
<a href="../styling/stripe.html">Base style - stripe</a>
</li>
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li>
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
</li>
<li>
<a href="../data_sources/ajax.html">Ajax sourced data</a>
</li>
<li>
<a href="../data_sources/js_array.html">Javascript sourced data</a>
</li>
<li>
<a href="../data_sources/server_side.html">Server-side processing</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/add_row.html">Add rows</a>
</li>
<li>
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
</li>
<li>
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
</li>
<li>
<a href="../api/highlight.html">Highlighting rows and columns</a>
</li>
<li>
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
</li>
<li>
<a href="../api/select_row.html">Row selection (multiple rows)</a>
</li>
<li>
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
</li>
<li>
<a href="../api/form.html">Form inputs</a>
</li>
<li>
<a href="../api/counter_columns.html">Index column</a>
</li>
<li>
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
</li>
<li>
<a href="../api/api_in_init.html">Using API in callbacks</a>
</li>
<li>
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
</li>
<li>
<a href="../api/regex.html">Search API (regular expressions)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li>
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
</li>
<li>
<a href="../ajax/objects.html">Ajax data source (objects)</a>
</li>
<li>
<a href="../ajax/deep.html">Nested object data (objects)</a>
</li>
<li>
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
</li>
<li>
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
</li>
<li>
<a href="../ajax/null_data_source.html">Generated content for a column</a>
</li>
<li>
<a href="../ajax/custom_data_property.html">Custom data source property</a>
</li>
<li>
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
</li>
<li>
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Server-side</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Server-side processing</a>
</li>
<li>
<a href="./custom_vars.html">Custom HTTP variables</a>
</li>
<li>
<a href="./post.html">POST data</a>
</li>
<li>
<a href="./ids.html">Automatic addition of row ID attributes</a>
</li>
<li>
<a href="./object_data.html">Object data source</a>
</li>
<li>
<a href="./row_details.html">Row details</a>
</li>
<li>
<a href="./select_rows.html">Row selection</a>
</li>
<li>
<a href="./jsonp.html">JSONP data source for remote domains</a>
</li>
<li>
<a href="./defer_loading.html">Deferred loading of data</a>
</li>
<li class="active">
<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li>
<a href="../plug-ins/api.html">API plug-in methods</a>
</li>
<li>
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
</li>
<li>
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
</li>
<li>
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
</li>
<li>
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

473
website/DataTables/examples/server_side/post.html Normal file
View File

@@ -0,0 +1,473 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - POST data</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
"url": "scripts/post.php",
"type": "POST"
},
"columns": [
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>POST data</span></h1>
<div class="info">
<p>By default, the Ajax request that DataTables makes to obtain server-side processing data is an HTTP GET request. However, there are times when you might wish to
use POST. This is very easily done by using the <code>type</code> option of the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
"DataTables initialisation option">ajax</code></a> initialisation option.</p>
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used in jQuery's Ajax function can
also be used in DataTable's <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a>
option).</p>
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> being
used with the <code>type</code> option set to <code class="string" title="String">POST</code> to make a POST request.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<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>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: {
&quot;url&quot;: &quot;scripts/post.php&quot;,
&quot;type&quot;: &quot;POST&quot;
},
&quot;columns&quot;: [
{ &quot;data&quot;: &quot;first_name&quot; },
{ &quot;data&quot;: &quot;last_name&quot; },
{ &quot;data&quot;: &quot;position&quot; },
{ &quot;data&quot;: &quot;office&quot; },
{ &quot;data&quot;: &quot;start_date&quot; },
{ &quot;data&quot;: &quot;salary&quot; }
]
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
</li>
<li>
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
</li>
<li>
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
</li>
<li>
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
</li>
<li>
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
</li>
<li>
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
</li>
<li>
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
</li>
<li>
<a href="../basic_init/dom.html">DOM positioning</a>
</li>
<li>
<a href="../basic_init/flexible_width.html">Flexible table width</a>
</li>
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
<li>
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
</li>
<li>
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
</li>
<li>
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
</li>
<li>
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
</li>
<li>
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
</li>
<li>
<a href="../basic_init/language.html">Language options</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li>
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
</li>
<li>
<a href="../advanced_init/dt_events.html">DataTables events</a>
</li>
<li>
<a href="../advanced_init/column_render.html">Column rendering</a>
</li>
<li>
<a href="../advanced_init/length_menu.html">Page length options</a>
</li>
<li>
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
</li>
<li>
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
</li>
<li>
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
</li>
<li>
<a href="../advanced_init/defaults.html">Setting defaults</a>
</li>
<li>
<a href="../advanced_init/row_callback.html">Row created callback</a>
</li>
<li>
<a href="../advanced_init/row_grouping.html">Row grouping</a>
</li>
<li>
<a href="../advanced_init/footer_callback.html">Footer callback</a>
</li>
<li>
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
</li>
<li>
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/display.html">Base style</a>
</li>
<li>
<a href="../styling/no-classes.html">Base style - no styling classes</a>
</li>
<li>
<a href="../styling/cell-border.html">Base style - cell borders</a>
</li>
<li>
<a href="../styling/compact.html">Base style - compact</a>
</li>
<li>
<a href="../styling/hover.html">Base style - hover</a>
</li>
<li>
<a href="../styling/order-column.html">Base style - order-column</a>
</li>
<li>
<a href="../styling/row-border.html">Base style - row borders</a>
</li>
<li>
<a href="../styling/stripe.html">Base style - stripe</a>
</li>
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li>
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
</li>
<li>
<a href="../data_sources/ajax.html">Ajax sourced data</a>
</li>
<li>
<a href="../data_sources/js_array.html">Javascript sourced data</a>
</li>
<li>
<a href="../data_sources/server_side.html">Server-side processing</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/add_row.html">Add rows</a>
</li>
<li>
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
</li>
<li>
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
</li>
<li>
<a href="../api/highlight.html">Highlighting rows and columns</a>
</li>
<li>
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
</li>
<li>
<a href="../api/select_row.html">Row selection (multiple rows)</a>
</li>
<li>
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
</li>
<li>
<a href="../api/form.html">Form inputs</a>
</li>
<li>
<a href="../api/counter_columns.html">Index column</a>
</li>
<li>
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
</li>
<li>
<a href="../api/api_in_init.html">Using API in callbacks</a>
</li>
<li>
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
</li>
<li>
<a href="../api/regex.html">Search API (regular expressions)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li>
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
</li>
<li>
<a href="../ajax/objects.html">Ajax data source (objects)</a>
</li>
<li>
<a href="../ajax/deep.html">Nested object data (objects)</a>
</li>
<li>
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
</li>
<li>
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
</li>
<li>
<a href="../ajax/null_data_source.html">Generated content for a column</a>
</li>
<li>
<a href="../ajax/custom_data_property.html">Custom data source property</a>
</li>
<li>
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
</li>
<li>
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Server-side</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Server-side processing</a>
</li>
<li>
<a href="./custom_vars.html">Custom HTTP variables</a>
</li>
<li class="active">
<a href="./post.html">POST data</a>
</li>
<li>
<a href="./ids.html">Automatic addition of row ID attributes</a>
</li>
<li>
<a href="./object_data.html">Object data source</a>
</li>
<li>
<a href="./row_details.html">Row details</a>
</li>
<li>
<a href="./select_rows.html">Row selection</a>
</li>
<li>
<a href="./jsonp.html">JSONP data source for remote domains</a>
</li>
<li>
<a href="./defer_loading.html">Deferred loading of data</a>
</li>
<li>
<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li>
<a href="../plug-ins/api.html">API plug-in methods</a>
</li>
<li>
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
</li>
<li>
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
</li>
<li>
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
</li>
<li>
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

573
website/DataTables/examples/server_side/row_details.html Normal file
View File

@@ -0,0 +1,573 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row details</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
function format ( d ) {
return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+
'Salary: '+d.salary+'<br>'+
'The child row can contain any data you wish, including links, images, inner tables etc.';
}
$(document).ready(function() {
var dt = $('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/ids-objects.php",
"columns": [
{
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" }
],
"order": [[1, 'asc']]
} );
// Array to track the ids of the details displayed rows
var detailRows = [];
$('#example tbody').on( 'click', 'tr td.details-control', function () {
var tr = $(this).closest('tr');
var row = dt.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
// Remove from the 'open' array
detailRows.splice( idx, 1 );
}
else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
}
} );
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#'+id+' td.details-control').trigger( 'click' );
} );
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Row details</span></h1>
<div class="info">
<p>This example shows the use of DataTables' ability to show and hide child rows which are attached to a parent row in the host table. This is often used to show
additional information about a row, particularly when you wish to convey more information about a row than there is space for in the host table.</p>
<p>The example below shows server-side processing being used with the first column having an event listener attached to it which will toggle the child row's
display. This is set up using <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
"DataTables initialisation option">columns.data</code></a> and <a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
"DataTables initialisation option">columns.defaultContent</code></a>, in combination with CSS to show an empty cell with a background image which can be clicked
upon.</p>
<p>The event handler makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title="DataTables API method">row().child</code></a>
methods to firstly check if a row is already displayed, and if so hide it, if not show it. The content of the child row is, in this example, defined by the
<code>format()</code> function, but you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to
the server to obtain the extra information to show. Note that the format details function has access to the full data source object for the row, including
information that is not actually shown in the table (the salary parameter for example).</p>
<p>Furthermore, this example shows a small difference from the <a href="../api/row_details.html">client-side row details example</a> in that to have rows
automatically reopen when the table is redrawn, we need to track a unique identifier for each row - in this case the row <code>id</code>. This is required because
in server-side processing mode rows are automatically destroyed and recreated on each draw.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">function format ( d ) {
return 'Full name: '+d.first_name+' '+d.last_name+'&lt;br&gt;'+
'Salary: '+d.salary+'&lt;br&gt;'+
'The child row can contain any data you wish, including links, images, inner tables etc.';
}
$(document).ready(function() {
var dt = $('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/ids-objects.php&quot;,
&quot;columns&quot;: [
{
&quot;class&quot;: &quot;details-control&quot;,
&quot;orderable&quot;: false,
&quot;data&quot;: null,
&quot;defaultContent&quot;: &quot;&quot;
},
{ &quot;data&quot;: &quot;first_name&quot; },
{ &quot;data&quot;: &quot;last_name&quot; },
{ &quot;data&quot;: &quot;position&quot; },
{ &quot;data&quot;: &quot;office&quot; }
],
&quot;order&quot;: [[1, 'asc']]
} );
// Array to track the ids of the details displayed rows
var detailRows = [];
$('#example tbody').on( 'click', 'tr td.details-control', function () {
var tr = $(this).closest('tr');
var row = dt.row( tr );
var idx = $.inArray( tr.attr('id'), detailRows );
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
// Remove from the 'open' array
detailRows.splice( idx, 1 );
}
else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
}
} );
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#'+id+' td.details-control').trigger( 'click' );
} );
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css">td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}</code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
</li>
<li>
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
</li>
<li>
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
</li>
<li>
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
</li>
<li>
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
</li>
<li>
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
</li>
<li>
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
</li>
<li>
<a href="../basic_init/dom.html">DOM positioning</a>
</li>
<li>
<a href="../basic_init/flexible_width.html">Flexible table width</a>
</li>
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
<li>
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
</li>
<li>
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
</li>
<li>
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
</li>
<li>
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
</li>
<li>
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
</li>
<li>
<a href="../basic_init/language.html">Language options</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li>
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
</li>
<li>
<a href="../advanced_init/dt_events.html">DataTables events</a>
</li>
<li>
<a href="../advanced_init/column_render.html">Column rendering</a>
</li>
<li>
<a href="../advanced_init/length_menu.html">Page length options</a>
</li>
<li>
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
</li>
<li>
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
</li>
<li>
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
</li>
<li>
<a href="../advanced_init/defaults.html">Setting defaults</a>
</li>
<li>
<a href="../advanced_init/row_callback.html">Row created callback</a>
</li>
<li>
<a href="../advanced_init/row_grouping.html">Row grouping</a>
</li>
<li>
<a href="../advanced_init/footer_callback.html">Footer callback</a>
</li>
<li>
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
</li>
<li>
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/display.html">Base style</a>
</li>
<li>
<a href="../styling/no-classes.html">Base style - no styling classes</a>
</li>
<li>
<a href="../styling/cell-border.html">Base style - cell borders</a>
</li>
<li>
<a href="../styling/compact.html">Base style - compact</a>
</li>
<li>
<a href="../styling/hover.html">Base style - hover</a>
</li>
<li>
<a href="../styling/order-column.html">Base style - order-column</a>
</li>
<li>
<a href="../styling/row-border.html">Base style - row borders</a>
</li>
<li>
<a href="../styling/stripe.html">Base style - stripe</a>
</li>
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li>
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
</li>
<li>
<a href="../data_sources/ajax.html">Ajax sourced data</a>
</li>
<li>
<a href="../data_sources/js_array.html">Javascript sourced data</a>
</li>
<li>
<a href="../data_sources/server_side.html">Server-side processing</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/add_row.html">Add rows</a>
</li>
<li>
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
</li>
<li>
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
</li>
<li>
<a href="../api/highlight.html">Highlighting rows and columns</a>
</li>
<li>
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
</li>
<li>
<a href="../api/select_row.html">Row selection (multiple rows)</a>
</li>
<li>
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
</li>
<li>
<a href="../api/form.html">Form inputs</a>
</li>
<li>
<a href="../api/counter_columns.html">Index column</a>
</li>
<li>
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
</li>
<li>
<a href="../api/api_in_init.html">Using API in callbacks</a>
</li>
<li>
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
</li>
<li>
<a href="../api/regex.html">Search API (regular expressions)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li>
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
</li>
<li>
<a href="../ajax/objects.html">Ajax data source (objects)</a>
</li>
<li>
<a href="../ajax/deep.html">Nested object data (objects)</a>
</li>
<li>
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
</li>
<li>
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
</li>
<li>
<a href="../ajax/null_data_source.html">Generated content for a column</a>
</li>
<li>
<a href="../ajax/custom_data_property.html">Custom data source property</a>
</li>
<li>
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
</li>
<li>
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Server-side</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Server-side processing</a>
</li>
<li>
<a href="./custom_vars.html">Custom HTTP variables</a>
</li>
<li>
<a href="./post.html">POST data</a>
</li>
<li>
<a href="./ids.html">Automatic addition of row ID attributes</a>
</li>
<li>
<a href="./object_data.html">Object data source</a>
</li>
<li class="active">
<a href="./row_details.html">Row details</a>
</li>
<li>
<a href="./select_rows.html">Row selection</a>
</li>
<li>
<a href="./jsonp.html">JSONP data source for remote domains</a>
</li>
<li>
<a href="./defer_loading.html">Deferred loading of data</a>
</li>
<li>
<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li>
<a href="../plug-ins/api.html">API plug-in methods</a>
</li>
<li>
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
</li>
<li>
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
</li>
<li>
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
</li>
<li>
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

81
website/DataTables/examples/server_side/scripts/ids-arrays.php Normal file
View File

@@ -0,0 +1,81 @@
<?php
/*
* DataTables example server-side processing script.
*
* Please note that this script is intentionally extremely simply to show how
* server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as
* for learning.
*
* See http://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - http://datatables.net/license_mit
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
// DB table to use
$table = 'datatables_demo';
// Table's primary key
$primaryKey = 'id';
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes + the primary key column for the id
$columns = array(
array(
'db' => 'id',
'dt' => 'DT_RowId',
'formatter' => function( $d, $row ) {
// Technically a DOM id cannot start with an integer, so we prefix
// a string. This can also be useful if you have multiple tables
// to ensure that the id is unique with a different prefix
return 'row_'.$d;
}
),
array( 'db' => 'first_name', 'dt' => 0 ),
array( 'db' => 'last_name', 'dt' => 1 ),
array( 'db' => 'position', 'dt' => 2 ),
array( 'db' => 'office', 'dt' => 3 ),
array(
'db' => 'start_date',
'dt' => 4,
'formatter' => function( $d, $row ) {
return date( 'jS M y', strtotime($d));
}
),
array(
'db' => 'salary',
'dt' => 5,
'formatter' => function( $d, $row ) {
return '$'.number_format($d);
}
)
);
// SQL server connection information
$sql_details = array(
'user' => '',
'pass' => '',
'db' => '',
'host' => ''
);
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP
* server-side, there is no need to edit below this line.
*/
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

80
website/DataTables/examples/server_side/scripts/ids-objects.php Normal file
View File

@@ -0,0 +1,80 @@
<?php
/*
* DataTables example server-side processing script.
*
* Please note that this script is intentionally extremely simply to show how
* server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as
* for learning.
*
* See http://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - http://datatables.net/license_mit
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
// DB table to use
$table = 'datatables_demo';
// Table's primary key
$primaryKey = 'id';
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier - in this case object
// parameter names
$columns = array(
array(
'db' => 'id',
'dt' => 'DT_RowId',
'formatter' => function( $d, $row ) {
// Technically a DOM id cannot start with an integer, so we prefix
// a string. This can also be useful if you have multiple tables
// to ensure that the id is unique with a different prefix
return 'row_'.$d;
}
),
array( 'db' => 'first_name', 'dt' => 'first_name' ),
array( 'db' => 'last_name', 'dt' => 'last_name' ),
array( 'db' => 'position', 'dt' => 'position' ),
array( 'db' => 'office', 'dt' => 'office' ),
array(
'db' => 'start_date',
'dt' => 'start_date',
'formatter' => function( $d, $row ) {
return date( 'jS M y', strtotime($d));
}
),
array(
'db' => 'salary',
'dt' => 'salary',
'formatter' => function( $d, $row ) {
return '$'.number_format($d);
}
)
);
$sql_details = array(
'user' => '',
'pass' => '',
'db' => '',
'host' => ''
);
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP
* server-side, there is no need to edit below this line.
*/
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

76
website/DataTables/examples/server_side/scripts/jsonp.php Normal file
View File

@@ -0,0 +1,76 @@
<?php
/*
* DataTables example server-side processing script.
*
* Please note that this script is intentionally extremely simply to show how
* server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as
* for learning.
*
* See http://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - http://datatables.net/license_mit
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
// DB table to use
$table = 'datatables_demo';
// Table's primary key
$primaryKey = 'id';
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
array( 'db' => 'first_name', 'dt' => 0 ),
array( 'db' => 'last_name', 'dt' => 1 ),
array( 'db' => 'position', 'dt' => 2 ),
array( 'db' => 'office', 'dt' => 3 ),
array(
'db' => 'start_date',
'dt' => 4,
'formatter' => function( $d, $row ) {
return date( 'jS M y', strtotime($d));
}
),
array(
'db' => 'salary',
'dt' => 5,
'formatter' => function( $d, $row ) {
return '$'.number_format($d);
}
)
);
$sql_details = array(
'user' => '',
'pass' => '',
'db' => '',
'host' => ''
);
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP
* server-side, there is no need to edit below this line.
*/
require( 'ssp.class.php' );
// Validate the JSONP to make use it is an okay Javascript function to execute
$jsonp = preg_match('/^[$A-Z_][0-9A-Z_$]*$/i', $_GET['callback']) ?
$_GET['callback'] :
false;
if ( $jsonp ) {
echo $jsonp.'('.json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
).');';
}

82
website/DataTables/examples/server_side/scripts/mysql.sql Normal file
View File

@@ -0,0 +1,82 @@
--
-- DataTables Ajax and server-side processing database (MySQL)
--
DROP TABLE IF EXISTS `datatables_demo`;
CREATE TABLE `datatables_demo` (
`id` int(10) NOT NULL auto_increment,
`first_name` varchar(250) NOT NULL default '',
`last_name` varchar(250) NOT NULL default '',
`position` varchar(250) NOT NULL default '',
`email` varchar(250) NOT NULL default '',
`office` varchar(250) NOT NULL default '',
`start_date` datetime default NULL,
`age` int(8),
`salary` int(8),
`seq` int(8),
`extn` varchar(8) NOT NULL default '',
PRIMARY KEY (`id`),
INDEX (`seq`)
);
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 );

57
website/DataTables/examples/server_side/scripts/objects.php Normal file
View File

@@ -0,0 +1,57 @@
<?php
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
// DB table to use
$table = 'datatables_demo';
// Table's primary key
$primaryKey = 'id';
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case object
// parameter names
$columns = array(
array( 'db' => 'first_name', 'dt' => 'first_name' ),
array( 'db' => 'last_name', 'dt' => 'last_name' ),
array( 'db' => 'position', 'dt' => 'position' ),
array( 'db' => 'office', 'dt' => 'office' ),
array(
'db' => 'start_date',
'dt' => 'start_date',
'formatter' => function( $d, $row ) {
return date( 'jS M y', strtotime($d));
}
),
array(
'db' => 'salary',
'dt' => 'salary',
'formatter' => function( $d, $row ) {
return '$'.number_format($d);
}
)
);
// SQL server connection information
$sql_details = array(
'user' => '',
'pass' => '',
'db' => '',
'host' => ''
);
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP
* server-side, there is no need to edit below this line.
*/
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

71
website/DataTables/examples/server_side/scripts/post.php Normal file
View File

@@ -0,0 +1,71 @@
<?php
/*
* DataTables example server-side processing script.
*
* Please note that this script is intentionally extremely simply to show how
* server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as
* for learning.
*
* See http://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - http://datatables.net/license_mit
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
// DB table to use
$table = 'datatables_demo';
// Table's primary key
$primaryKey = 'id';
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case object
// parameter names
$columns = array(
array( 'db' => 'first_name', 'dt' => 'first_name' ),
array( 'db' => 'last_name', 'dt' => 'last_name' ),
array( 'db' => 'position', 'dt' => 'position' ),
array( 'db' => 'office', 'dt' => 'office' ),
array(
'db' => 'start_date',
'dt' => 'start_date',
'formatter' => function( $d, $row ) {
return date( 'jS M y', strtotime($d));
}
),
array(
'db' => 'salary',
'dt' => 'salary',
'formatter' => function( $d, $row ) {
return '$'.number_format($d);
}
)
);
// SQL server connection information
$sql_details = array(
'user' => '',
'pass' => '',
'db' => '',
'host' => ''
);
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP
* server-side, there is no need to edit below this line.
*/
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_POST, $sql_details, $table, $primaryKey, $columns )
);

82
website/DataTables/examples/server_side/scripts/postgres.sql Normal file
View File

@@ -0,0 +1,82 @@
--
-- DataTables Ajax and server-side processing database (Postgres)
--
DROP TABLE IF EXISTS datatables_demo;
CREATE TABLE datatables_demo (
id serial,
first_name text NOT NULL default '',
last_name text NOT NULL default '',
position text NOT NULL default '',
email text NOT NULL default '',
office text NOT NULL default '',
start_date timestamp without time zone default NULL,
age integer,
salary integer,
seq integer,
extn text NOT NULL default '',
PRIMARY KEY (id)
);
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 );
ALTER SEQUENCE datatables_demo_id_seq RESTART WITH 58;

72
website/DataTables/examples/server_side/scripts/server_processing.php Normal file
View File

@@ -0,0 +1,72 @@
<?php
/*
* DataTables example server-side processing script.
*
* Please note that this script is intentionally extremely simply to show how
* server-side processing can be implemented, and probably shouldn't be used as
* the basis for a large complex system. It is suitable for simple use cases as
* for learning.
*
* See http://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - http://datatables.net/license_mit
*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
// DB table to use
$table = 'datatables_demo';
// Table's primary key
$primaryKey = 'id';
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
array( 'db' => 'first_name', 'dt' => 0 ),
array( 'db' => 'last_name', 'dt' => 1 ),
array( 'db' => 'position', 'dt' => 2 ),
array( 'db' => 'office', 'dt' => 3 ),
array(
'db' => 'start_date',
'dt' => 4,
'formatter' => function( $d, $row ) {
return date( 'jS M y', strtotime($d));
}
),
array(
'db' => 'salary',
'dt' => 5,
'formatter' => function( $d, $row ) {
return '$'.number_format($d);
}
)
);
// SQL server connection information
$sql_details = array(
'user' => '',
'pass' => '',
'db' => '',
'host' => ''
);
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP
* server-side, there is no need to edit below this line.
*/
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);

79
website/DataTables/examples/server_side/scripts/sqlite.sql Normal file
View File

@@ -0,0 +1,79 @@
--
-- DataTables Ajax and server-side processing database (SQLite)
--
DROP TABLE IF EXISTS datatables_demo;
CREATE TABLE datatables_demo (
id integer primary key,
first_name text NOT NULL default '',
last_name text NOT NULL default '',
position text NOT NULL default '',
email text NOT NULL default '',
office text NOT NULL default '',
start_date timestamp without time zone default NULL,
age integer,
salary integer,
seq integer,
extn text NOT NULL default ''
);
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 );

85
website/DataTables/examples/server_side/scripts/sqlserver.sql Normal file
View File

@@ -0,0 +1,85 @@
--
-- DataTables Ajax and server-side processing database (SQL Server)
--
IF OBJECT_ID('datatables_demo', 'U') IS NOT NULL
DROP TABLE datatables_demo;
CREATE TABLE datatables_demo (
id int NOT NULL identity,
first_name varchar(250) NOT NULL default '',
last_name varchar(250) NOT NULL default '',
position varchar(250) NOT NULL default '',
email varchar(250) NOT NULL default '',
office varchar(250) NOT NULL default '',
start_date datetime default NULL,
age int,
salary int,
seq int,
extn varchar(8) NOT NULL default '',
PRIMARY KEY (id)
);
SET IDENTITY_INSERT datatables_demo ON;
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 );
SET IDENTITY_INSERT datatables_demo OFF;

529
website/DataTables/examples/server_side/scripts/ssp.class.php Normal file
View File

@@ -0,0 +1,529 @@
<?php
/*
* Helper functions for building a DataTables server-side processing SQL query
*
* The static functions in this class are just helper functions to help build
* the SQL used in the DataTables demo server-side processing scripts. These
* functions obviously do not represent all that can be done with server-side
* processing, they are intentionally simple to show how it works. More complex
* server-side processing operations will likely require a custom script.
*
* See http://datatables.net/usage/server-side for full details on the server-
* side processing requirements of DataTables.
*
* @license MIT - http://datatables.net/license_mit
*/
// REMOVE THIS BLOCK - used for DataTables test environment only!
$file = $_SERVER['DOCUMENT_ROOT'].'/datatables/mysql.php';
if ( is_file( $file ) ) {
include( $file );
}
class SSP {
/**
* Create the data output array for the DataTables rows
*
* @param array $columns Column information array
* @param array $data Data from the SQL get
* @return array Formatted data in a row based format
*/
static function data_output ( $columns, $data )
{
$out = array();
for ( $i=0, $ien=count($data) ; $i<$ien ; $i++ ) {
$row = array();
for ( $j=0, $jen=count($columns) ; $j<$jen ; $j++ ) {
$column = $columns[$j];
// Is there a formatter?
if ( isset( $column['formatter'] ) ) {
$row[ $column['dt'] ] = $column['formatter']( $data[$i][ $column['db'] ], $data[$i] );
}
else {
$row[ $column['dt'] ] = $data[$i][ $columns[$j]['db'] ];
}
}
$out[] = $row;
}
return $out;
}
/**
* Database connection
*
* Obtain an PHP PDO connection from a connection details array
*
* @param array $conn SQL connection details. The array should have
* the following properties
* * host - host name
* * db - database name
* * user - user name
* * pass - user password
* @return resource PDO connection
*/
static function db ( $conn )
{
if ( is_array( $conn ) ) {
return self::sql_connect( $conn );
}
return $conn;
}
/**
* Paging
*
* Construct the LIMIT clause for server-side processing SQL query
*
* @param array $request Data sent to server by DataTables
* @param array $columns Column information array
* @return string SQL limit clause
*/
static function limit ( $request, $columns )
{
$limit = '';
if ( isset($request['start']) && $request['length'] != -1 ) {
$limit = "LIMIT ".intval($request['start']).", ".intval($request['length']);
}
return $limit;
}
/**
* Ordering
*
* Construct the ORDER BY clause for server-side processing SQL query
*
* @param array $request Data sent to server by DataTables
* @param array $columns Column information array
* @return string SQL order by clause
*/
static function order ( $request, $columns )
{
$order = '';
if ( isset($request['order']) && count($request['order']) ) {
$orderBy = array();
$dtColumns = self::pluck( $columns, 'dt' );
for ( $i=0, $ien=count($request['order']) ; $i<$ien ; $i++ ) {
// Convert the column index into the column data property
$columnIdx = intval($request['order'][$i]['column']);
$requestColumn = $request['columns'][$columnIdx];
$columnIdx = array_search( $requestColumn['data'], $dtColumns );
$column = $columns[ $columnIdx ];
if ( $requestColumn['orderable'] == 'true' ) {
$dir = $request['order'][$i]['dir'] === 'asc' ?
'ASC' :
'DESC';
$orderBy[] = '`'.$column['db'].'` '.$dir;
}
}
$order = 'ORDER BY '.implode(', ', $orderBy);
}
return $order;
}
/**
* Searching / Filtering
*
* Construct the WHERE clause for server-side processing SQL query.
*
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It's possible to do here performance on large
* databases would be very poor
*
* @param array $request Data sent to server by DataTables
* @param array $columns Column information array
* @param array $bindings Array of values for PDO bindings, used in the
* sql_exec() function
* @return string SQL where clause
*/
static function filter ( $request, $columns, &$bindings )
{
$globalSearch = array();
$columnSearch = array();
$dtColumns = self::pluck( $columns, 'dt' );
if ( isset($request['search']) && $request['search']['value'] != '' ) {
$str = $request['search']['value'];
for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i++ ) {
$requestColumn = $request['columns'][$i];
$columnIdx = array_search( $requestColumn['data'], $dtColumns );
$column = $columns[ $columnIdx ];
if ( $requestColumn['searchable'] == 'true' ) {
$binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
$globalSearch[] = "`".$column['db']."` LIKE ".$binding;
}
}
}
// Individual column filtering
if ( isset( $request['columns'] ) ) {
for ( $i=0, $ien=count($request['columns']) ; $i<$ien ; $i++ ) {
$requestColumn = $request['columns'][$i];
$columnIdx = array_search( $requestColumn['data'], $dtColumns );
$column = $columns[ $columnIdx ];
$str = $requestColumn['search']['value'];
if ( $requestColumn['searchable'] == 'true' &&
$str != '' ) {
$binding = self::bind( $bindings, '%'.$str.'%', PDO::PARAM_STR );
$columnSearch[] = "`".$column['db']."` LIKE ".$binding;
}
}
}
// Combine the filters into a single string
$where = '';
if ( count( $globalSearch ) ) {
$where = '('.implode(' OR ', $globalSearch).')';
}
if ( count( $columnSearch ) ) {
$where = $where === '' ?
implode(' AND ', $columnSearch) :
$where .' AND '. implode(' AND ', $columnSearch);
}
if ( $where !== '' ) {
$where = 'WHERE '.$where;
}
return $where;
}
/**
* Perform the SQL queries needed for an server-side processing requested,
* utilising the helper functions of this class, limit(), order() and
* filter() among others. The returned array is ready to be encoded as JSON
* in response to an SSP request, or can be modified if needed before
* sending back to the client.
*
* @param array $request Data sent to server by DataTables
* @param array|PDO $conn PDO connection resource or connection parameters array
* @param string $table SQL table to query
* @param string $primaryKey Primary key of the table
* @param array $columns Column information array
* @return array Server-side processing response array
*/
static function simple ( $request, $conn, $table, $primaryKey, $columns )
{
$bindings = array();
$db = self::db( $conn );
// Build the SQL query string from the request
$limit = self::limit( $request, $columns );
$order = self::order( $request, $columns );
$where = self::filter( $request, $columns, $bindings );
// Main query to actually get the data
$data = self::sql_exec( $db, $bindings,
"SELECT `".implode("`, `", self::pluck($columns, 'db'))."`
FROM `$table`
$where
$order
$limit"
);
// Data set length after filtering
$resFilterLength = self::sql_exec( $db, $bindings,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table`
$where"
);
$recordsFiltered = $resFilterLength[0][0];
// Total data set length
$resTotalLength = self::sql_exec( $db,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table`"
);
$recordsTotal = $resTotalLength[0][0];
/*
* Output
*/
return array(
"draw" => isset ( $request['draw'] ) ?
intval( $request['draw'] ) :
0,
"recordsTotal" => intval( $recordsTotal ),
"recordsFiltered" => intval( $recordsFiltered ),
"data" => self::data_output( $columns, $data )
);
}
/**
* The difference between this method and the `simple` one, is that you can
* apply additional `where` conditions to the SQL queries. These can be in
* one of two forms:
*
* * 'Result condition' - This is applied to the result set, but not the
* overall paging information query - i.e. it will not effect the number
* of records that a user sees they can have access to. This should be
* used when you want apply a filtering condition that the user has sent.
* * 'All condition' - This is applied to all queries that are made and
* reduces the number of records that the user can access. This should be
* used in conditions where you don't want the user to ever have access to
* particular records (for example, restricting by a login id).
*
* @param array $request Data sent to server by DataTables
* @param array|PDO $conn PDO connection resource or connection parameters array
* @param string $table SQL table to query
* @param string $primaryKey Primary key of the table
* @param array $columns Column information array
* @param string $whereResult WHERE condition to apply to the result set
* @param string $whereAll WHERE condition to apply to all queries
* @return array Server-side processing response array
*/
static function complex ( $request, $conn, $table, $primaryKey, $columns, $whereResult=null, $whereAll=null )
{
$bindings = array();
$db = self::db( $conn );
$localWhereResult = array();
$localWhereAll = array();
$whereAllSql = '';
// Build the SQL query string from the request
$limit = self::limit( $request, $columns );
$order = self::order( $request, $columns );
$where = self::filter( $request, $columns, $bindings );
$whereResult = self::_flatten( $whereResult );
$whereAll = self::_flatten( $whereAll );
if ( $whereResult ) {
$where = $where ?
$where .' AND '.$whereResult :
'WHERE '.$whereResult;
}
if ( $whereAll ) {
$where = $where ?
$where .' AND '.$whereAll :
'WHERE '.$whereAll;
$whereAllSql = 'WHERE '.$whereAll;
}
// Main query to actually get the data
$data = self::sql_exec( $db, $bindings,
"SELECT `".implode("`, `", self::pluck($columns, 'db'))."`
FROM `$table`
$where
$order
$limit"
);
// Data set length after filtering
$resFilterLength = self::sql_exec( $db, $bindings,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table`
$where"
);
$recordsFiltered = $resFilterLength[0][0];
// Total data set length
$resTotalLength = self::sql_exec( $db, $bindings,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table` ".
$whereAllSql
);
$recordsTotal = $resTotalLength[0][0];
/*
* Output
*/
return array(
"draw" => isset ( $request['draw'] ) ?
intval( $request['draw'] ) :
0,
"recordsTotal" => intval( $recordsTotal ),
"recordsFiltered" => intval( $recordsFiltered ),
"data" => self::data_output( $columns, $data )
);
}
/**
* Connect to the database
*
* @param array $sql_details SQL server connection details array, with the
* properties:
* * host - host name
* * db - database name
* * user - user name
* * pass - user password
* @return resource Database connection handle
*/
static function sql_connect ( $sql_details )
{
try {
$db = @new PDO(
"mysql:host={$sql_details['host']};dbname={$sql_details['db']}",
$sql_details['user'],
$sql_details['pass'],
array( PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION )
);
}
catch (PDOException $e) {
self::fatal(
"An error occurred while connecting to the database. ".
"The error reported by the server was: ".$e->getMessage()
);
}
return $db;
}
/**
* Execute an SQL query on the database
*
* @param resource $db Database handler
* @param array $bindings Array of PDO binding values from bind() to be
* used for safely escaping strings. Note that this can be given as the
* SQL query string if no bindings are required.
* @param string $sql SQL query to execute.
* @return array Result from the query (all rows)
*/
static function sql_exec ( $db, $bindings, $sql=null )
{
// Argument shifting
if ( $sql === null ) {
$sql = $bindings;
}
$stmt = $db->prepare( $sql );
//echo $sql;
// Bind parameters
if ( is_array( $bindings ) ) {
for ( $i=0, $ien=count($bindings) ; $i<$ien ; $i++ ) {
$binding = $bindings[$i];
$stmt->bindValue( $binding['key'], $binding['val'], $binding['type'] );
}
}
// Execute
try {
$stmt->execute();
}
catch (PDOException $e) {
self::fatal( "An SQL error occurred: ".$e->getMessage() );
}
// Return all
return $stmt->fetchAll( PDO::FETCH_BOTH );
}
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Internal methods
*/
/**
* Throw a fatal error.
*
* This writes out an error message in a JSON string which DataTables will
* see and show to the user in the browser.
*
* @param string $msg Message to send to the client
*/
static function fatal ( $msg )
{
echo json_encode( array(
"error" => $msg
) );
exit(0);
}
/**
* Create a PDO binding key which can be used for escaping variables safely
* when executing a query with sql_exec()
*
* @param array &$a Array of bindings
* @param * $val Value to bind
* @param int $type PDO field type
* @return string Bound key to be used in the SQL where this parameter
* would be used.
*/
static function bind ( &$a, $val, $type )
{
$key = ':binding_'.count( $a );
$a[] = array(
'key' => $key,
'val' => $val,
'type' => $type
);
return $key;
}
/**
* Pull a particular property from each assoc. array in a numeric array,
* returning and array of the property values from each item.
*
* @param array $a Array to get data from
* @param string $prop Property to read
* @return array Array of property values
*/
static function pluck ( $a, $prop )
{
$out = array();
for ( $i=0, $len=count($a) ; $i<$len ; $i++ ) {
$out[] = $a[$i][$prop];
}
return $out;
}
/**
* Return a string from an array or a string
*
* @param array|string $a Array to join
* @param string $join Glue for the concatenation
* @return string Joined string
*/
static function _flatten ( $a, $join = ' AND ' )
{
if ( ! $a ) {
return '';
}
else if ( $a && is_array($a) ) {
return implode( $join, $a );
}
return $a;
}
}

490
website/DataTables/examples/server_side/select_rows.html Normal file
View File

@@ -0,0 +1,490 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Row selection</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
var selected = [];
$("#example").DataTable({
"processing": true,
"serverSide": true,
"ajax": "scripts/ids-arrays.php",
"rowCallback": function( row, data ) {
if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
$(row).addClass('selected');
}
}
});
$('#example tbody').on('click', 'tr', function () {
var id = this.id;
var index = $.inArray(id, selected);
if ( index === -1 ) {
selected.push( id );
} else {
selected.splice( index, 1 );
}
$(this).toggleClass('selected');
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Row selection</span></h1>
<div class="info">
<p>When you want to have user selectable rows in DataTables, it is relatively trivial when using DOM based data - but when using server-side processing, DataTables
doesn't retain DOM row elements over pages / filtering etc. As such, you will need to keep a track of which rows a user as selected and mark them as selected on
each draw.</p>
<p>This is shown in this demo, which uses a unique ID assigned to the TR element (this is done automatically through the use of the <code>DT_RowId</code> special
property returned as part of the object given by the server for each row) to track which rows are selected and reselect them is appropriate on a draw.</p>
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<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>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
var selected = [];
$(&quot;#example&quot;).DataTable({
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/ids-arrays.php&quot;,
&quot;rowCallback&quot;: function( row, data ) {
if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
$(row).addClass('selected');
}
}
});
$('#example tbody').on('click', 'tr', function () {
var id = this.id;
var index = $.inArray(id, selected);
if ( index === -1 ) {
selected.push( id );
} else {
selected.splice( index, 1 );
}
$(this).toggleClass('selected');
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
</li>
<li>
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
</li>
<li>
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
</li>
<li>
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
</li>
<li>
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
</li>
<li>
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
</li>
<li>
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
</li>
<li>
<a href="../basic_init/dom.html">DOM positioning</a>
</li>
<li>
<a href="../basic_init/flexible_width.html">Flexible table width</a>
</li>
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
<li>
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
</li>
<li>
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
</li>
<li>
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
</li>
<li>
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
</li>
<li>
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
</li>
<li>
<a href="../basic_init/language.html">Language options</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li>
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
</li>
<li>
<a href="../advanced_init/dt_events.html">DataTables events</a>
</li>
<li>
<a href="../advanced_init/column_render.html">Column rendering</a>
</li>
<li>
<a href="../advanced_init/length_menu.html">Page length options</a>
</li>
<li>
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
</li>
<li>
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
</li>
<li>
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
</li>
<li>
<a href="../advanced_init/defaults.html">Setting defaults</a>
</li>
<li>
<a href="../advanced_init/row_callback.html">Row created callback</a>
</li>
<li>
<a href="../advanced_init/row_grouping.html">Row grouping</a>
</li>
<li>
<a href="../advanced_init/footer_callback.html">Footer callback</a>
</li>
<li>
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
</li>
<li>
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/display.html">Base style</a>
</li>
<li>
<a href="../styling/no-classes.html">Base style - no styling classes</a>
</li>
<li>
<a href="../styling/cell-border.html">Base style - cell borders</a>
</li>
<li>
<a href="../styling/compact.html">Base style - compact</a>
</li>
<li>
<a href="../styling/hover.html">Base style - hover</a>
</li>
<li>
<a href="../styling/order-column.html">Base style - order-column</a>
</li>
<li>
<a href="../styling/row-border.html">Base style - row borders</a>
</li>
<li>
<a href="../styling/stripe.html">Base style - stripe</a>
</li>
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li>
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
</li>
<li>
<a href="../data_sources/ajax.html">Ajax sourced data</a>
</li>
<li>
<a href="../data_sources/js_array.html">Javascript sourced data</a>
</li>
<li>
<a href="../data_sources/server_side.html">Server-side processing</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/add_row.html">Add rows</a>
</li>
<li>
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
</li>
<li>
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
</li>
<li>
<a href="../api/highlight.html">Highlighting rows and columns</a>
</li>
<li>
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
</li>
<li>
<a href="../api/select_row.html">Row selection (multiple rows)</a>
</li>
<li>
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
</li>
<li>
<a href="../api/form.html">Form inputs</a>
</li>
<li>
<a href="../api/counter_columns.html">Index column</a>
</li>
<li>
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
</li>
<li>
<a href="../api/api_in_init.html">Using API in callbacks</a>
</li>
<li>
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
</li>
<li>
<a href="../api/regex.html">Search API (regular expressions)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li>
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
</li>
<li>
<a href="../ajax/objects.html">Ajax data source (objects)</a>
</li>
<li>
<a href="../ajax/deep.html">Nested object data (objects)</a>
</li>
<li>
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
</li>
<li>
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
</li>
<li>
<a href="../ajax/null_data_source.html">Generated content for a column</a>
</li>
<li>
<a href="../ajax/custom_data_property.html">Custom data source property</a>
</li>
<li>
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
</li>
<li>
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Server-side</a></h3>
<ul class="toc active">
<li>
<a href="./simple.html">Server-side processing</a>
</li>
<li>
<a href="./custom_vars.html">Custom HTTP variables</a>
</li>
<li>
<a href="./post.html">POST data</a>
</li>
<li>
<a href="./ids.html">Automatic addition of row ID attributes</a>
</li>
<li>
<a href="./object_data.html">Object data source</a>
</li>
<li>
<a href="./row_details.html">Row details</a>
</li>
<li class="active">
<a href="./select_rows.html">Row selection</a>
</li>
<li>
<a href="./jsonp.html">JSONP data source for remote domains</a>
</li>
<li>
<a href="./defer_loading.html">Deferred loading of data</a>
</li>
<li>
<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li>
<a href="../plug-ins/api.html">API plug-in methods</a>
</li>
<li>
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
</li>
<li>
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
</li>
<li>
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
</li>
<li>
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>

449
website/DataTables/examples/server_side/simple.html Normal file
View File

@@ -0,0 +1,449 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
<title>DataTables example - Server-side processing</title>
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
</style>
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
</script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js">
</script>
<script type="text/javascript" language="javascript" src="../resources/demo.js">
</script>
<script type="text/javascript" language="javascript" class="init">
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/server_processing.php"
} );
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
<h1>DataTables example <span>Server-side processing</span></h1>
<div class="info">
<p>There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side
options that DataTables provides. With server-side processing enabled, all paging, searching, ordering 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>
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
"DataTables initialisation option">serverSide</code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax</code></a> option.</p>
<p>This example shows a very simple table, matching the other client-side processing examples, but in this instance using server-side processing.</p>
</div>
<div class="demo-html"></div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Start date</th>
<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>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
<li>Server-side script</li>
</ul>
<div class="tabs">
<div class="js">
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
$('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
&quot;ajax&quot;: &quot;scripts/server_processing.php&quot;
} );
} );</code>
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
<ul>
<li>
<a href="//code.jquery.com/jquery-1.12.4.js">//code.jquery.com/jquery-1.12.4.js</a>
</li>
<li>
<a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a>
</li>
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library files (below), in order to correctly display the table. The
additional CSS used is shown below:</p><code class="multiline language-css"></code>
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
<ul>
<li>
<a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a>
</li>
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data will update automatically as any additional data is
loaded.</p>
</div>
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note that this is just an example script using PHP. Server-side
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
documentation</a>.</p>
</div>
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
<ul class="toc">
<li>
<a href="../basic_init/zero_configuration.html">Zero configuration</a>
</li>
<li>
<a href="../basic_init/filter_only.html">Feature enable / disable</a>
</li>
<li>
<a href="../basic_init/table_sorting.html">Default ordering (sorting)</a>
</li>
<li>
<a href="../basic_init/multi_col_sort.html">Multi-column ordering</a>
</li>
<li>
<a href="../basic_init/multiple_tables.html">Multiple tables</a>
</li>
<li>
<a href="../basic_init/hidden_columns.html">Hidden columns</a>
</li>
<li>
<a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a>
</li>
<li>
<a href="../basic_init/dom.html">DOM positioning</a>
</li>
<li>
<a href="../basic_init/flexible_width.html">Flexible table width</a>
</li>
<li>
<a href="../basic_init/state_save.html">State saving</a>
</li>
<li>
<a href="../basic_init/alt_pagination.html">Alternative pagination</a>
</li>
<li>
<a href="../basic_init/scroll_y.html">Scroll - vertical</a>
</li>
<li>
<a href="../basic_init/scroll_y_dynamic.html">Scroll - vertical, dynamic height</a>
</li>
<li>
<a href="../basic_init/scroll_x.html">Scroll - horizontal</a>
</li>
<li>
<a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a>
</li>
<li>
<a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a>
</li>
<li>
<a href="../basic_init/language.html">Language options</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
<ul class="toc">
<li>
<a href="../advanced_init/events_live.html">DOM / jQuery events</a>
</li>
<li>
<a href="../advanced_init/dt_events.html">DataTables events</a>
</li>
<li>
<a href="../advanced_init/column_render.html">Column rendering</a>
</li>
<li>
<a href="../advanced_init/length_menu.html">Page length options</a>
</li>
<li>
<a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a>
</li>
<li>
<a href="../advanced_init/complex_header.html">Complex headers with column visibility</a>
</li>
<li>
<a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a>
</li>
<li>
<a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a>
</li>
<li>
<a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a>
</li>
<li>
<a href="../advanced_init/language_file.html">Language file</a>
</li>
<li>
<a href="../advanced_init/defaults.html">Setting defaults</a>
</li>
<li>
<a href="../advanced_init/row_callback.html">Row created callback</a>
</li>
<li>
<a href="../advanced_init/row_grouping.html">Row grouping</a>
</li>
<li>
<a href="../advanced_init/footer_callback.html">Footer callback</a>
</li>
<li>
<a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a>
</li>
<li>
<a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li>
<a href="../styling/display.html">Base style</a>
</li>
<li>
<a href="../styling/no-classes.html">Base style - no styling classes</a>
</li>
<li>
<a href="../styling/cell-border.html">Base style - cell borders</a>
</li>
<li>
<a href="../styling/compact.html">Base style - compact</a>
</li>
<li>
<a href="../styling/hover.html">Base style - hover</a>
</li>
<li>
<a href="../styling/order-column.html">Base style - order-column</a>
</li>
<li>
<a href="../styling/row-border.html">Base style - row borders</a>
</li>
<li>
<a href="../styling/stripe.html">Base style - stripe</a>
</li>
<li>
<a href="../styling/bootstrap.html">Bootstrap 3</a>
</li>
<li>
<a href="../styling/foundation.html">Foundation</a>
</li>
<li>
<a href="../styling/semanticui.html">Semantic UI</a>
</li>
<li>
<a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a>
</li>
<li>
<a href="../styling/bootstrap4.html">Bootstrap 4 (Tech. preview)</a>
</li>
<li>
<a href="../styling/material.html">Material Design (Tech. preview)</a>
</li>
<li>
<a href="../styling/uikit.html">UIKit (Tech. preview)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../data_sources/index.html">Data sources</a></h3>
<ul class="toc">
<li>
<a href="../data_sources/dom.html">HTML (DOM) sourced data</a>
</li>
<li>
<a href="../data_sources/ajax.html">Ajax sourced data</a>
</li>
<li>
<a href="../data_sources/js_array.html">Javascript sourced data</a>
</li>
<li>
<a href="../data_sources/server_side.html">Server-side processing</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li>
<a href="../api/add_row.html">Add rows</a>
</li>
<li>
<a href="../api/multi_filter.html">Individual column searching (text inputs)</a>
</li>
<li>
<a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a>
</li>
<li>
<a href="../api/highlight.html">Highlighting rows and columns</a>
</li>
<li>
<a href="../api/row_details.html">Child rows (show extra / detailed information)</a>
</li>
<li>
<a href="../api/select_row.html">Row selection (multiple rows)</a>
</li>
<li>
<a href="../api/select_single_row.html">Row selection and deletion (single row)</a>
</li>
<li>
<a href="../api/form.html">Form inputs</a>
</li>
<li>
<a href="../api/counter_columns.html">Index column</a>
</li>
<li>
<a href="../api/show_hide.html">Show / hide columns dynamically</a>
</li>
<li>
<a href="../api/api_in_init.html">Using API in callbacks</a>
</li>
<li>
<a href="../api/tabs_and_scrolling.html">Scrolling and Bootstrap tabs</a>
</li>
<li>
<a href="../api/regex.html">Search API (regular expressions)</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li>
<a href="../ajax/simple.html">Ajax data source (arrays)</a>
</li>
<li>
<a href="../ajax/objects.html">Ajax data source (objects)</a>
</li>
<li>
<a href="../ajax/deep.html">Nested object data (objects)</a>
</li>
<li>
<a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a>
</li>
<li>
<a href="../ajax/orthogonal-data.html">Orthogonal data</a>
</li>
<li>
<a href="../ajax/null_data_source.html">Generated content for a column</a>
</li>
<li>
<a href="../ajax/custom_data_property.html">Custom data source property</a>
</li>
<li>
<a href="../ajax/custom_data_flat.html">Flat array data source</a>
</li>
<li>
<a href="../ajax/defer_render.html">Deferred rendering for speed</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="./index.html">Server-side</a></h3>
<ul class="toc active">
<li class="active">
<a href="./simple.html">Server-side processing</a>
</li>
<li>
<a href="./custom_vars.html">Custom HTTP variables</a>
</li>
<li>
<a href="./post.html">POST data</a>
</li>
<li>
<a href="./ids.html">Automatic addition of row ID attributes</a>
</li>
<li>
<a href="./object_data.html">Object data source</a>
</li>
<li>
<a href="./row_details.html">Row details</a>
</li>
<li>
<a href="./select_rows.html">Row selection</a>
</li>
<li>
<a href="./jsonp.html">JSONP data source for remote domains</a>
</li>
<li>
<a href="./defer_loading.html">Deferred loading of data</a>
</li>
<li>
<a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a>
</li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li>
<a href="../plug-ins/api.html">API plug-in methods</a>
</li>
<li>
<a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a>
</li>
<li>
<a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type detection)</a>
</li>
<li>
<a href="../plug-ins/range_filtering.html">Custom filtering - range search</a>
</li>
<li>
<a href="../plug-ins/dom_sort.html">Live DOM ordering</a>
</li>
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extensions">extensions</a> and <a href=
"http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of DataTables.</p>
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2016<br>
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>